axios ts 封装

对于axios的TypeScript封装，可以按照以下步骤进行：

1. 首先，安装axios和@types/axios依赖：

npm install axios @types/axios

2. 创建一个名为api.ts（或其他你喜欢的名称）的文件，用于封装axios请求。

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

// 创建一个自定义的请求配置接口，可以根据需要添加更多字段
interface CustomRequestConfig extends AxiosRequestConfig {
  // 添加自定义字段
}

// 创建一个自定义的响应数据接口，可以根据需要添加更多字段
interface CustomResponse<T = any> extends AxiosResponse {
  // 添加自定义字段
  data: T;
}

// 创建一个自定义的错误信息接口，可以根据需要添加更多字段
interface CustomError extends AxiosError {
  // 添加自定义字段
}

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

// 添加请求拦截器
instance.interceptors.request.use(
  (config: CustomRequestConfig) => {
    // 在发送请求之前做一些处理，例如添加请求头

    return config;
  },
  (error: CustomError) => {
    // 对请求错误做处理

    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  (response: CustomResponse) => {
    // 对响应数据做处理

    return response.data;
  },
  (error: CustomError) => {
    // 对响应错误做处理

    return Promise.reject(error);
  }
);

export default instance;

3. 在其他文件中使用封装好的axios实例进行请求：

import api from './api';

// 发起GET请求
api.get('/users')
  .then((response) => {
    // 处理响应数据
    console.log(response);
  })
  .catch((error) => {
    // 处理错误
    console.error(error);
  });

// 发起POST请求
api.post('/users', { name: 'John Doe' })
  .then((response) => {
    // 处理响应数据
    console.log(response);
  })
  .catch((error) => {
    // 处理错误
    console.error(error);
  });

这样就完成了axios的TypeScript封装。你可以根据需要在api.ts文件中扩展更多的请求方法，或者根据后端接口的定义进行自定义。