TypeScript 二次封装 Axios

npm install axios @types/axios --save

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

interface HttpConfig extends AxiosRequestConfig {};

class Http {
  private http: AxiosInstance;
  private baseConfig: AxiosRequestConfig = {
    // env环境配置
    baseURL: import.meta.env.VITE_API_URL,
    timeout: 60000
  };
  constructor(config: HttpConfig) {
    this.http = axios.create(Object.assign(config, this.baseConfig));
    this.http.interceptors.request.use(this.handleRequest);
    this.http.interceptors.response.use(this.handleResponse, this.handleError);
  }

  public async get<T>(url: string, config?: HttpConfig): Promise<T> {
    const response = await this.http.get<T>(url, {
      ...config
    })
    return response.data;
  }
  public async post<T>(url: string, data?: any, config?: HttpConfig): Promise<T> {
    const response = await this.http.post<T>(url, data, {
      ...config
    });
    return response.data;
  }
  
  // 请求拦截
  private handleRequest(config: AxiosRequestConfig): AxiosRequestConfig {
    // 在请求发送之前做一些处理，比如添加 token
    return config;
  }
  // 响应拦截
  private handleResponse(response: AxiosResponse): AxiosResponse {
    let {code,message,data} = response.data;
    // 在响应数据返回之前做一些处理，比如统一处理错误码
    if (code !== 200) {
      console.error(message);
    }
    return data;
  }
  private handleError(error: any): Promise<any> {
    if (axios.isCancel(error)) {
      console.warn('Request canceled:', error.message);
    }
    return Promise.reject(error);
  }
}
export default new Http({});

import http from '@/utils/http.ts';

http.get('/apis/data').then( data =>{
    console.log(data)
})