uniapp vue3 接口请求封装

在Uniapp Vue3中进行接口请求封装可以按照以下步骤进行操作：

1. 创建一个名为`http.js`的文件，用于封装请求方法。
2. 在`http.js`文件中引入`axios`库，并创建一个axios实例。
3. 设置axios的基本配置，包括`baseURL`和`timeout`等。
4. 在请求拦截器中可以对请求进行一些额外处理，比如在请求头中加入token等。
5. 在响应拦截器中可以对响应进行一些额外处理，比如判断响应状态码等。
6. 导出axios实例作为默认导出。

下面是一个示例代码：

// http.js
import axios from "axios";

const http = axios.create({
  baseURL: "https://xxxx.test03.qcw800.com",
  timeout: 6000,
});

http.interceptors.request.use(
  (config) => {
    // 在请求拦截器中进行一些处理
    // 比如在请求头中加入token
    config.headers['api_token'] = localStorage.getItem('token') || '';
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

http.interceptors.response.use(
  (response) => {
    // 在响应拦截器中进行一些处理
    // 比如判断响应状态码
    return response;
  },
  (err) => {
    return Promise.reject(err);
  }
);

export default http;

然后，在需要使用接口请求的地方，比如在`xxx.vue`文件中，可以按照以下步骤进行调用：

1. 在`xxx.vue`文件中引入之前封装好的`http.js`文件。
2. 在`setup`函数中，通过`getCurrentInstance()`获取到`proxy`对象。
3. 在需要的地方通过`proxy.$http`来进行接口请求。

下面是一个示例代码：

// xxx.vue
<script>
import { onMounted, getCurrentInstance } from "vue";
import http from "@/utils/http.js";

export default {
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      proxy.$http({
        url: "xxx",
        data: {},
        method: ""
      }).then((res) => {
        // 处理接口返回数据
      });
    });
  }
}
</script>

这样就完成了Uniapp Vue3中的接口请求封装。通过封装的`http.js`文件，在需要使用接口请求的地方，可以通过`proxy.$http`来进行请求，并处理返回的数据。