对axios做一个简单封装

对axios做一个简单的封装，方便在项目中快速使用，也方便以后对axios做快速的切换

axios @1.6.2 + ts

• instance.ts

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


interface Interceptors {
  requestInterceptors?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig
  requestInterceptorsCatch?: (error: any) => any
  responseInterceptors?: (response: AxiosResponse) => AxiosResponse
  responseInterceptorsCatch?: (error: any) => any
}

interface RequestConfig extends AxiosRequestConfig {
  interceptors?: Interceptors
}

class Instance {
  instance: AxiosInstance

  constructor(config: RequestConfig) {
    this.instance = axios.create(config)
    //局部拦截器
    this.instance.interceptors.request.use(
      config.interceptors?.requestInterceptors,
      config.interceptors?.requestInterceptorsCatch
    )
    this.instance.interceptors.response.use(
      config.interceptors?.responseInterceptors,
      config.interceptors?.responseInterceptorsCatch
    )
    //全局拦截器
    this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
      return config
    }, (error) => {
      return Promise.reject(error)
    })
    this.instance.interceptors.response.use((response: AxiosResponse) => {
      return response
    }, (error) => {
      return Promise.reject(error)
    })
  }

  instanceRequest(config: RequestConfig) {
    //单个请求拦截器
    if (config?.interceptors) {
      this.instance.interceptors.request.use(
        config.interceptors?.requestInterceptors,
        config.interceptors?.requestInterceptorsCatch
      )
      this.instance.interceptors.response.use(
        config.interceptors?.responseInterceptors,
        config.interceptors?.responseInterceptorsCatch
      )
    }
    return new Promise((resolve, reject) => {
      this.instance(config).then((response: AxiosResponse) => {
        return resolve(response)
      }).catch((error) => {
        return reject(error)
      })
    })
  }
}

export default Instance

• request.ts

import Instance from '@/network/instance'
import { BASE_URL, TIME_OUT } from '@/network/config'

const request = new Instance({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  interceptors: {
    responseInterceptors: (response) => {
      return response.data
    }
  }
})

const requestVerify = new Instance({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  interceptors: {
    requestInterceptors: (config) => {
      const token: string | null = sessionStorage.getItem('demo')
      if (token) {
        config.headers.Authorization = `Bearer ${token}`
      }
      return config
    },
    responseInterceptors: (response) => {
      return response.data
    }
  }
})

export { request, requestVerify }

• config.ts

let BASE_URL: string = ''
let TIME_OUT: number = 0

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'https://www.def.com'
  TIME_OUT = 10000
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'https://www.abc.com'
  TIME_OUT = 10000
}

export { BASE_URL, TIME_OUT }

• 具体使用

import { ref } from 'vue'
import { request } from '@/network/request'

const message = ref('main')

const dataList = ref()

request.instanceRequest({
  url: '/home/multidata',
  method: 'get',
  interceptors: {
    requestInterceptors: (config) => {
      console.log('请求成功拦截器')
      return config
    },
    requestInterceptorsCatch: (error) => {
      console.log('请求失败拦截器')
      return error
    },
    responseInterceptors: (response) => {
      console.log('响应成功拦截器')
      return response
    },
    responseInterceptorsCatch: (error) => {
      console.log('响应失败拦截器')
      return error
    }
  }
}).then((res) => {
  dataList.value = res
  console.log(res)
}).catch((error) => {
  console.log(error)
})