vue3项目-axios封装

Vue 3中使用Axios进行网络请求的封装可以通过创建一个axios实例来实现。首先，安装axios库：

npm install axios

然后，在项目中创建一个`api`文件夹，用于存放API相关的文件。在该文件夹下创建一个`http.js`文件，用于封装axios。

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

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置接口的基础url
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前可以做一些操作，例如添加token等
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理，例如统一处理错误信息等
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

之后，在需要发送网络请求的地方，引入封装好的axios实例，并使用相应的HTTP方法进行请求。

例如，在一个`userService.js`文件中封装了用户相关的API：

// api/userService.js
import http from './http';

export function getUser(id) {
  return http.get(`/user/${id}`);
}

export function updateUser(id, data) {
  return http.patch(`/user/${id}`, data);
}

export function deleteUser(id) {
  return http.delete(`/user/${id}`);}

现在，你可以在Vue组件中调用这些API方法来发送网络请求了。