07 ts对axios封装

在TypeScript中对axios进行封装，可以创建一个封装了axios实例的类，并提供一些静态方法来发送请求。以下是一个简单的例子：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
class HttpClient {
  private static instance: axios.AxiosInstance;
 
  // 私有构造函数，防止外部直接创建HttpClient实例
  private constructor() {
    HttpClient.instance = axios.create({
      baseURL: 'http://your-api-url',
      timeout: 10000,
      // 其他配置...
    });
  }
 
  // 获取HttpClient实例的静态方法
  public static getInstance(): axios.AxiosInstance {
    if (!this.instance) {
      new HttpClient();
    }
    return this.instance;
  }
 
  // 封装GET请求的静态方法
  public static async get<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.getInstance().get<T>(url, config);
  }
 
  // 封装POST请求的静态方法
  public static async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.getInstance().post<T>(url, data, config);
  }
 
  // 可以继续封装其他HTTP方法，如PUT, DELETE等
}
 
// 使用封装后的axios发送请求
async function fetchData() {
  try {
    const response = await HttpClient.get<any>('/your-endpoint');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

在这个例子中，我们创建了一个名为HttpClient的类，并在其中使用axios的create方法创建了一个实例。我们还提供了getInstance方法来获取这个实例，以及封装了get和post方法来发送HTTP请求。这样，我们就可以在应用中使用HttpClient.get和HttpClient.post来代替直接使用axios方法，同时还能享受到TypeScript带来的好处。