TS封装axios

在TypeScript中封装axios，可以创建一个封装了axios实例的类或函数库，并且可以添加适当的类型定义和错误处理。以下是一个简单的封装示例：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
class HttpClient {
  private axiosInstance = axios.create({
    baseURL: 'http://your-api-url.com',
    timeout: 10000,
    // 其他配置...
  });
 
  public request<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.request(config);
  }
 
  public get<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.get<T>(url, config);
  }
 
  public delete<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.delete<T>(url, config);
  }
 
  public head<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.head<T>(url, config);
  }
 
  // 其他HTTP方法（post, put, patch）...
}
 
export default new HttpClient();

使用封装后的axios：

import httpClient from './path/to/HttpClient';
 
interface User {
  id: number;
  name: string;
}
 
httpClient.get<User[]>('/users').then(response => {
  console.log(response.data);
}).catch(error => {
  console.error('An error occurred:', error);
});

这个封装提供了基本的HTTP方法，并且可以通过泛型指定返回数据的类型。同时，它使用了axios的实例来共享相同的配置和插件，比如请求拦截器和响应拦截器，可以在创建axios实例时添加。此外，错误处理被放在了封装方法的外部，以便在调用封装方法时处理错误。