二次封装Axios减小对单个库的依赖

　　本文采用Vue3+Ts以类的形式二次封装Axios

　　创建Axios继承类，定义AxRequestConfig接口继承原Axios的CreateAxiosDefaults实例类型，在此基础上添加interceptors配置，使new Axios时可以传入每个实例自己的拦截器函数↓

import axios from 'axios'
import type { AxiosInstance, CreateAxiosDefaults, AxiosRequestConfig, AxiosResponse } from 'axios'

// 封装拦截器接口，用于拦截不同基本地址请求
interface AxInterceptors<T = AxiosResponse> {
  requestSucessFn?: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestFailureFn?: (err: any) => any
  responseSucessFn?: (res: T) => T
  responseFailureFn?: (err: any) => any
}
// 封装拦截器接口，用于拦截不同基本地址请求
interface AxRequestConfig<T = AxiosResponse> extends CreateAxiosDefaults {
  interceptors?: AxInterceptors<T>
}

class AxRequtst {
  instance: AxiosInstance

  constructor(config: AxRequestConfig) {
    this.instance = axios.create(config) //外部导入配置对象baseurl,timeout等
    //请求全局拦截
    // this.instance.interceptors.request.use(
    //   (config) => {
    //     return config
    //   },
    //   (err) => {
    //     return err
    //   },
    // )
    //响应全局拦截
    // this.instance.interceptors.response.use(
    //   (config) => {
    //     return config
    //   },
    //   (err) => {
    //     return err
    //   },
    // )
    // 拦截设置的不同请求 
    this.instance.interceptors.request.use(
      config.interceptors?.requestSucessFn,
      config.interceptors?.requestFailureFn,
    )
    // 拦截设置的不同响应
    this.instance.interceptors.response.use(
      config.interceptors?.responseSucessFn,
      config.interceptors?.responseFailureFn,
    )
  }

  request(config: AxiosRequestConfig) {
    // 判断是否发送请求
    // isLoading.value = true
    return new Promise((resolve, reject) => {
      this.instance
        .request(config)
        .then((res) => {
          resolve(res)
          // isLoading.value = false
        })
        .catch((err) => {
          reject(err)
          // isLoading.value = false
        })
    })
  }

  get(config: AxiosRequestConfig) {
    return this.request({ ...config, method: 'GET' })
  }

  post(config: AxiosRequestConfig) {
    return this.request({ ...config, method: 'POST' })
  }

  delete(config: AxiosRequestConfig) {
    return this.request({ ...config, method: 'DELETE' })
  }

  patch(config: AxiosRequestConfig) {
    return this.request({ ...config, method: 'PATCH' })
  }
}

export default AxRequtst

　　然后就可以如下所示，自定义实例传入baseUrl、time、interceptors等初始配置↓

 

import usePublicStore from '@/stores/public'
import { BASE_URL, TIME_OUT } from './config'
import AxRequtst from './request'

const publicStore = usePublicStore()

const axRequest = new AxRequtst({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  interceptors: {
    requestSucessFn: (config: any) => {
      // console.log('axRequest的请求成功拦截')
      // 携带token
      const Htoken = localStorage.getItem('token')
      if (Htoken) config.headers.token = Htoken
      // loading
      publicStore.isLoading = true

      return config
    },
    requestFailureFn: (err) => {
      // console.log('axRequest的请求失败拦截')
      return err
    },
    responseSucessFn: (res) => {
      // console.log('axRequest的响应成功拦截')
      // loading
      publicStore.isLoading = false
      return res.data
    },
    responseFailureFn: (err) => {
      // console.log('axRequest的响应失败拦截')
      publicStore.isLoading = false
      return err
    },
  },
})
// 测试拦截不同关系请求
const mockRequest = new AxRequtst({
  timeout: 8000,
  // baseURL: '/hd',
  interceptors: {
    requestSucessFn: (config: any) => {
      // console.log("请求成功拦截")
      return config
    },
    requestFailureFn: (err) => {
      // console.log("请求失败拦截");
      return err
    },
    responseSucessFn: (res) => {
      // console.log("响应成功拦截");
      return res
    },
    responseFailureFn: (err) => {
      // console.log("响应失败拦截");
      return err
    },
  },
  // headers: {
  //   'content-type': 'application/json',
  // },
})

// 数藏
const hdRequest = new AxRequtst({
  timeout: 8000,
  baseURL: '/hd',
  interceptors: {
    requestSucessFn: (config: any) => {
      // console.log("请求成功拦截")
      return config
    },
    requestFailureFn: (err) => {
      // console.log("请求失败拦截");
      return err
    },
    responseSucessFn: (res) => {
      // console.log("响应成功拦截");
      return res
    },
    responseFailureFn: (err) => {
      // console.log("响应失败拦截");
      return err
    },
  },
  // headers: {
  //   'content-type': 'application/json',
  // },
})

export { axRequest, mockRequest, hdRequest }