vue3封装axios请求

在Vue3中封装axios请求可以按照以下步骤进行：

1. 在src目录下新建一个api目录，用于存放与请求相关的文件。
2. 在api目录下创建一个request.js文件，并引入axios。
3. 创建一个axios实例，可以设置baseURL和timeout等参数。
4. 设置axios的请求拦截器，可以在请求发送之前进行一些处理，例如添加请求头信息。
5. 设置axios的响应拦截器，可以在接收到响应后进行一些处理，例如处理错误信息。
6. 在main.js中引入封装的axios，并使用use()方法进行注册。

下面是一个示例代码：

// api/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 根据实际情况设置baseURL
  timeout: 5000, // 超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前可以进行一些处理，例如添加请求头信息
    // config.headers['Authorization'] = 'Bearer token';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理，例如处理错误信息
    // const res = response.data;
    // if (res.code !== 200) {
    //   return Promise.reject(new Error(res.message || 'Error'));
    // } else {
    //   return res;
    // }
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default service;

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

const app = createApp(App);
app.config.globalProperties.$http = axios;
app.mount('#app');

现在你可以在需要的组件中使用封装好的axios请求了，例如：

// 使用封装的axios请求
this.$http.get('/api/users').then((response) => {
  console.log(response);
}).catch((error) => {
  console.error(error);
});