vue3对axios封装

在Vue 3中，可以通过封装axios来进行网络请求的处理。下面是一个基本的示例：

首先，安装axios和vuex：

npm install axios vuex

然后在项目中创建一个单独的api文件夹，在该文件夹下创建一个api.js文件。在api.js中，我们可以封装我们的网络请求方法。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://your-api-base-url.com', // 设置请求的base url
  timeout: 10000, // 请求超时时间
});

// 封装网络请求的方法
export const request = (config) => {
  return new Promise((resolve, reject) => {
    instance(config).then((response) => {
      resolve(response.data);
    }).catch((error) => {
      reject(error);
    });
  });
};

接下来，在main.js中引入我们的api.js文件，并将其挂载到Vue原型上，这样在组件中就可以直接通过`this.$request`来调用网络请求方法。

import { createApp } from 'vue';
import App from './App.vue';
import { request } from './api/api';

const app = createApp(App);

app.config.globalProperties.$request = request;

app.mount('#app');

现在，我们就可以在组件中使用`this.$request`来发起网络请求了。

export default {
  methods: {
    fetchData() {
      this.$request({
        method: 'get',
        url: '/api/data',
        params: {
          id: 1,
        },
      }).then((response) => {
        console.log(response);
      }).catch((error) => {
        console.log(error);
      });
    },
  },
};

这样就完成了Vue 3对axios的封装。你可以根据具体的项目需求，在api.js中封装更多的网络请求方法。