SOURCE

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import { AbortRequest } from './abort'
import { CustomRequest, InterceptorConfig } from './types'

// ↓自定义axios类
export class CustomAxios<T> {
  // ↓原生axios对象
  private instance: AxiosInstance
  // ↓axios请求中止对象
  private abortRequest: AbortRequest

  // ↓构造函数
  constructor(customRequest: CustomRequest<T>) {
    this.instance = axios.create(customRequest.customConfig)
    this.abortRequest = new AbortRequest()
    this.useInterceptors(customRequest.interceptorConfig)
  }

  // ↓使用拦截器
  useInterceptors(config: InterceptorConfig<T>) {
    // ↓从自定义请求配置获取属性
    const {
      enableAbortRequest,
      interceptorRequest,
      interceptorRequestRejected,
      interceptorResponse,
      interceptorResponseRejected,
    } = config

    // ↓请求拦截器。在请求发送前,对请求配置做一些处理
    this.instance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // ↓如果开启中止请求功能
        if (enableAbortRequest) {
          const pendingKey = this.abortRequest.genPendingKey(config)
          if (this.abortRequest.cancelRequest(pendingKey)) {
            this.abortRequest.addPending(config)
          }
        }

        if (interceptorRequest) {
          return interceptorRequest(config)
        }
        return config
      },
      (error: any) => {
        console.log('请求拦截器抛出异常...')
        if (interceptorRequestRejected) {
          return interceptorRequestRejected(error)
        }
        return Promise.reject(error)
      }
    )

    // ↓响应拦截器。在then、catch之前对响应数据做一些处理
    this.instance.interceptors.response.use(
      (response: AxiosResponse<T>) => {
        // ↓如果开启中止请求功能
        if (enableAbortRequest) {
          const pendingKey = this.abortRequest.genPendingKey(response.config)
          this.abortRequest.removePending(pendingKey)
        }

        if (interceptorResponse) {
          return interceptorResponse(response)
        }
        return response
      },
      (error) => {
        console.log('响应拦截器抛出异常...')
        if (interceptorResponseRejected) {
          return interceptorResponseRejected(error)
        }
        return Promise.reject(error)
      }
    )
  }

  // ↓request请求
  request(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return new Promise((resolve, reject) => {
      this.instance
        .request(config)
        .then((response) => {
          resolve(response.data)
        })
        .catch((error) => {
          // TODO 魔法值需配置化
          const msg = error || '程序内部错误'
          reject(msg)
        })
    })
  }

  // ↓get请求
  get(url: string, params?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.request({ url, method: 'GET', params, ...config })
  }

  // ↓post请求
  post(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.request({ url, method: 'POST', data, ...config })
  }

  // ↓put请求
  put(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.request({ url, method: 'PUT', data, ...config })
  }

  // ↓delete请求
  delete(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.request({ url, method: 'DELETE', data, ...config })
  }
}
console 命令行工具 X clear

                    
>
console