基于ts的axios的二次封装（coder why版本）

基于axios-1.3.3版本实现

index.ts

/*
 * @Author: yosong
 * @Date: 2023-02-20 10:34:11
 * @LastEditors: Do not edit
 * @LastEditTime: 2023-03-09 14:29:39
 * @FilePath: \service\request\index.ts
 */
import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { YORequesInterceptors, YORequestConfig } from './type'

class YORequest {
  // axios的实力方法
  instance: AxiosInstance
  // 传过来的请求与响应拦截
  interceptors?: YORequesInterceptors

  // 构造器
  constructor(config: YORequestConfig) {
    this.instance = axios.create(config)
    this.interceptors = config.interceptors

    // 当前实例的请求拦截
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCath
    )
    // 当前实例的响应拦击
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCath
    )

    // 所有实例的请求拦截
    this.instance.interceptors.request.use(
      config => {
        // console.log('所有实例的请求拦截')
        return config
      },
      error => {
        // console.log('所有实例的请求失败拦截')
        return Promise.reject(error)
      }
    )
    // 所有实例的响应拦截
    this.instance.interceptors.response.use(
      config => {
        // console.log('所有实例的响应拦截')
        return config
      },
      error => {
        // console.log('所有实例的响应失败拦截')
        return Promise.reject(error)
      }
    )
  }

  // 请求方法
  request<T>(config: YORequestConfig): Promise<{
    code: number
    data: T
    msg: string
  }> {
    return new Promise(resolve => {
      // 单独的请求拦截
      if (config.interceptorsToOnce?.requestInterceptor) {
        config = config.interceptorsToOnce.requestInterceptor(config)
      }

      this.instance
        .request(config)
        .then(res => {
          // 单独的响应拦截
          if (config.interceptorsToOnce?.responseInterceptor) {
            res = config.interceptorsToOnce.responseInterceptor(res)
          }
          // 返回结果
          resolve(res.data)
        })
        .catch(err => {
          resolve(err.response ? err.response.data : err)
        })
    })
  }

  get<T>(config: YORequestConfig): Promise<{
    code: number
    data: T
    msg: string
  }> {
    return this.request<T>({ ...config, method: 'get' })
  }
  post<T>(config: YORequestConfig): Promise<{
    code: number
    data: T
    msg: string
  }> {
    return this.request<T>({ ...config, method: 'post' })
  }
  delete<T>(config: YORequestConfig): Promise<{
    code: number
    data: T
    msg: string
  }> {
    return this.request<T>({ ...config, method: 'delete' })
  }
  put<T>(config: YORequestConfig): Promise<{
    code: number
    data: T
    msg: string
  }> {
    return this.request<T>({ ...config, method: 'put' })
  }
  patch<T>(config: YORequestConfig): Promise<{
    code: number
    data: T
    msg: string
  }> {
    return this.request<T>({ ...config, method: 'patch' })
  }
}

export default YORequest

type.ts

/*
 * @Author: yosong
 * @Date: 2023-02-20 10:47:07
 * @LastEditors: Do not edit
 * @LastEditTime: 2023-02-21 11:14:19
 * @FilePath: \service\request\type.ts
 */
import type {
  AxiosResponse,
  AxiosRequestConfig,
  InternalAxiosRequestConfig,
} from 'axios'

// 拦截器接口
export interface YORequesInterceptors {
  // 请求
  requestInterceptor?: (
    config: InternalAxiosRequestConfig
  ) => InternalAxiosRequestConfig
  requestInterceptorCath?: (error: any) => any
  // 响应
  responseInterceptor?: (res: AxiosResponse) => AxiosResponse
  responseInterceptorCath?: (error: any) => any
}

// 单独的拦截器接口
export interface YORequesInterceptorsToOnce {
  // 请求
  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig
  // requestInterceptorCath?: (error: any) => any
  // 响应
  responseInterceptor?: (res: AxiosResponse) => AxiosResponse
  // responseInterceptorCath?: (error: any) => any
}

// 配置接口
export interface YORequestConfig extends AxiosRequestConfig {
  interceptors?: YORequesInterceptors
  interceptorsToOnce?: YORequesInterceptorsToOnce
}

注： gitee地址： 源码gitee厂库地址（给个星星）