vue3+ts的axios二次封装

Vue 3和TypeScript的Axios二次封装可以提供更好的代码可维护性和可扩展性。下面是一个示例：

首先，你需要安装axios和@types/axios（用于TypeScript类型定义）：

npm install axios
npm install @types/axios

然后，在你的项目中创建一个`api`文件夹，并在其中创建一个`http.ts`文件，用于封装Axios。

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建一个Axios实例
const instance: AxiosInstance = axios.create({
  baseURL: 'http://your-api-base-url.com', // 替换为你的API基础URL
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在发送请求之前做一些处理，例如添加请求头等
    // config.headers['Authorization'] = 'Bearer ' + token;
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据进行处理
    // 可以根据实际情况进行全局错误处理、数据转换等
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default instance;

接下来，在需要使用Axios的地方导入`http.ts`文件，并使用封装好的Axios实例进行网络请求。

import http from '@/api/http';

// 示例API请求方法
export const getUser = () => {
  return http.get('/user');
};

export const createUser = (data: any) => {
  return http.post('/user', data);
};

// 其他API请求方法...

这样，你就可以在Vue组件或其他地方使用这些封装好的API请求方法了。

import { getUser } from '@/api/user';

export default {
  created() {
    this.fetchUser();
  },
  methods: {
    async fetchUser() {
      try {
        const user = await getUser();
        // 处理返回的用户数据
      } catch (error) {
        // 处理请求错误
      }
    },
  },
};

这就是Vue 3和TypeScript的Axios二次封装的基本示例。你可以根据你的项目需求进一步扩展和优化这个封装。