axios使用ts类去封装

当使用TypeScript来封装axios时，可以通过创建一个类来管理axios实例和请求方法。下面是一个示例代码：

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

class ApiService {
  private instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 5000
  });

  constructor() {
    // 请求拦截器
    this.instance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // 在发送请求之前做一些处理，例如添加token等
        return config;
      },
      (error: AxiosError) => {
        // 请求错误处理
        console.error(error);
        return Promise.reject(error);
      }
    );

    // 响应拦截器
    this.instance.interceptors.response.use(
      (response: AxiosResponse) => {
        // 对响应数据做一些处理，例如解析返回的json数据
        return response.data;
      },
      (error: AxiosError) => {
        // 响应错误处理
        console.error(error);
        return Promise.reject(error);
      }
    );
  }

  public get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.instance.get<T>(url, config);
  }

  public post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    return this.instance.post<T>(url, data, config);
  }

  // 其他请求方法类似，如put、delete等

}

export default new ApiService();

然后在你的代码中使用这个封装好的类：

import api from './ApiService';

// 发送GET请求
api.get<User[]>('/users')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

// 发送POST请求
api.post<User>('/users', { name: 'John Doe' })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

这样，你可以使用TypeScript类去封装axios，并且在vite+vue3项目中使用它进行网络请求。希望对你有所帮助！如果还有其他问题，请随时提问。