vue 3 + ts 项目怎样封装axios

在Vue 3 + TypeScript项目中封装axios可以分为以下几个步骤：

1. 安装axios和@types/axios

npm install axios @types/axios --save

2. 在src目录下新建一个api文件夹，并在其中创建一个axios.ts文件。

3. 在axios.ts文件中，引入axios和创建axios实例。我们可以使用axios.create()方法创建一个axios实例，并设置一些默认配置，比如设置baseURL、超时时间等。

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

// 创建axios实例
const service: AxiosInstance = axios.create({
  timeout: 10000, // 请求超时时间
  baseURL: process.env.VUE_APP_BASE_API // 接口的基础路径
});

// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求发送之前做一些处理
    return config;
  },
  (error) => {
    // 发送请求失败时做一些处理
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做一些处理
    return response.data;
  },
  (error) => {
    // 对响应错误做一些处理
    return Promise.reject(error);
  }
);

export default service;

4. 编写API接口模块，在api目录下创建一个modules.ts文件，并在其中定义接口模块。我们可以使用interface来定义接口，再使用axios实例来发起请求。

import axios from './axios';

// 定义接口类型
interface UserInfo {
  name: string;
  age: number;
}

// 定义接口模块
const userApi = {
  // 获取用户信息
  getUserInfo: () => {
    return axios.get<UserInfo>('/user/info');
  },
  // 更新用户信息
  updateUserInfo: (data: UserInfo) => {
    return axios.post('/user/info', data);
  }
};

export default userApi;

5. 在Vue组件中使用API接口模块。在Vue组件中引入刚刚定义的API接口模块，然后调用API接口模块中的方法即可。

import { defineComponent } from 'vue';
import userApi from '@/api/modules';

export default defineComponent({
  async mounted() {
    try {
      const userInfo = await userApi.getUserInfo();
      console.log(userInfo);
    } catch (error) {
      console.error(error);
    }
  }
});

这样我们就成功地封装了axios，并定义了API接口模块，方便我们在Vue组件中使用。