目录结构：
    image.png

    1. import type { AxiosRequestConfig, AxiosResponse } from 'axios'
    3. // 封装的拦截器
    4. export interface BMYRequestInterceptors {
    5.   requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig
    6.   requestInterceptorCatch?: (error: any) => any
    7.   // responseInterceptor?: (res: T) => T
    8.   responseInterceptor?: <T = AxiosResponse>(config: T) => T
    9.   responseInterceptorCatch?: (error: any) => any
    10. }
    12. export interface BMYRequestConfig extends AxiosRequestConfig {
    13.   interceptors?: BMYRequestInterceptors
    14.   noCancel?: boolean
    15.   // showLoading?: boolean
    16. }
    18. // type.ts 取消请求的数组，请求前判断同一url是否存在，存在就取消
    19. export interface CancelRequestSource {
    20.   [index: string]: () => void
    21. }
    1. import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
    2. import Modal from '@/components/Modal'
    3. import router from '@/router'
    4. import i18n from '@/locale'
    5. import Message from '@/components/Message'
    6. import type { AxiosInstance } from 'axios'
    7. import type { BMYRequestInterceptors, BMYRequestConfig, CancelRequestSource } from './type'
    9. class Request {
    10.   instance: AxiosInstance
    11.   interceptors?: BMYRequestInterceptors
    13.   /**
    14.   * 存放取消方法的集合
    15.   * 在创建请求后将取消请求方法 push 到该集合中
    16.   * 封装一个方法，可以取消请求，传入 url: string|string[]
    17.   * 在请求之前判断同一URL是否存在，如果存在就取消请求
    18.   */
    19.   cancelRequestSourceList: CancelRequestSource[] = []
    21.   /**
    22.   * 请求之前需要将url push到该集合中
    23.   * 请求完毕后将url从集合中删除
    24.   * 添加在发送请求之前完成，删除在响应之后删除
    25.   */
    26.   requestUrlList: string[] = []
    28.   constructor(config: BMYRequestConfig) {
    29.     // 创建 axios 实例
    30.     this.instance = axios.create(config)
    32.     // 保存基本信息
    33.     this.interceptors = config.interceptors
    35.     // 全局请求拦截
    36.     this.instance.interceptors.request.use(
    37.       (res: AxiosRequestConfig) => {
    38.         return res
    39.       },
    40.       (err: any) => err
    41.     )
    43.     // 拦截器
    44.     this.instance.interceptors.request.use(
    45.       this.interceptors?.requestInterceptor,
    46.       this.interceptors?.requestInterceptorCatch
    47.     )
    48.     this.instance.interceptors.response.use(
    49.       this.interceptors?.responseInterceptor,
    50.       this.interceptors?.responseInterceptorCatch
    51.     )
    53.     // 全局响应拦截器保证最后执行
    54.     this.instance.interceptors.response.use(
    55.       // 因为我们接口的数据都在res.data下，所以我们直接返回res.data
    56.       (res: AxiosResponse) => {
    57.         if (res?.data?.code == 200) {
    58.           return res.data
    59.         } else if ((res as any).code === 'ERR_CANCELED') {
    60.           return Promise.reject('ERR_CANCELED')
    61.         } else if ((res as any)?.response?.data?.status === 401) {
    62.           Modal({
    63.             type: 'error',
    64.             titleAlign: 'start',
    65.             title: i18n.global.t('service.resuest.warning'),
    66.             simple: false,
    67.             content: i18n.global.t('service.resuest.warningTipInfo'),
    68.             onOk: () => {
    69.               router.push({ name: 'login' })
    70.             }
    71.           })
    72.           return Promise.reject('需要重新登录')
    73.         } else if (res.status == 200) {
    74.           return res.data
    75.         } else {
    76.           Message({
    77.             content: (res as any)?.response?.data?.message,
    78.             duration: 2 * 1000,
    79.             type: 'warning'
    80.           })
    81.           return Promise.reject('错误')
    82.         }
    83.       },
    84.       (err: any) => {
    85.         return err
    86.       }
    87.     )
    88.   }
    90.   // index.ts
    91.   /**
    92.   * @description: 获取指定 url 在 cancelRequestSourceList 中的索引
    93.   * @param {string} url
    94.   * @returns {number} 索引位置
    95.   */
    96.   private getSourceIndex(url: string): number {
    97.     return this.cancelRequestSourceList?.findIndex((item: CancelRequestSource) => {
    98.       return Object.keys(item)[0] === url
    99.     }) as number
    100.   }
    102.   /**
    103.   * @description: 删除 requestUrlList 和 cancelRequestSourceList
    104.   * @param {string} url
    105.   * @returns {*}
    106.   */
    107.   private delUrl(url: string) {
    108.     const urlIndex = this.requestUrlList?.findIndex((u) => u === url)
    109.     const sourceIndex = this.getSourceIndex(url)
    110.     // 删除url和cancel方法
    111.     urlIndex !== -1 && this.requestUrlList?.splice(urlIndex as number, 1)
    112.     sourceIndex !== -1 && this.cancelRequestSourceList?.splice(sourceIndex as number, 1)
    113.   }
    115.   // 取消全部请求
    116.   cancelAllRequest() {
    117.     this.cancelRequestSourceList?.forEach((source) => {
    118.       const key = Object.keys(source)[0]
    119.       source[key]()
    120.     })
    121.   }
    123.   // 取消请求
    124.   cancelRequest(url: string[] | string) {
    125.     if (typeof url === 'string') {
    126.       // 取消单个请求
    127.       const sourceIndex = this.getSourceIndex(url)
    128.       sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][url]()
    129.     } else {
    130.       // 存在多个需要取消请求的地址
    131.       url.forEach((u) => {
    132.         const sourceIndex = this.getSourceIndex(u)
    133.         sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][u]()
    134.       })
    135.     }
    136.   }
    138.   request<T>(config: BMYRequestConfig): Promise<T> {
    139.     return new Promise((resolve, reject) => {
    140.       // 如果我们为单个请求设置拦截器，这里使用单个请求的拦截器
    141.       if (config.interceptors?.requestInterceptor) {
    142.         config = config.interceptors.requestInterceptor(config)
    143.       }
    144.       const { url, noCancel } = config
    145.       if (url) {
    146.         // 取消多余的请求
    147.         !noCancel && this.cancelRequest(url)
    148.         this.requestUrlList?.push(url)
    149.         config.cancelToken = new axios.CancelToken((c) => {
    150.           this.cancelRequestSourceList?.push({
    151.             [url]: () => {
    152.               // console.log(c, c())
    153.               c()
    154.               return Promise.reject('')
    155.             }
    156.           })
    157.         })
    158.       }
    159.       this.instance
    160.         .request<any, T>(config)
    161.         .then((res) => {
    162.         // 如果我们为单个响应设置拦截器，这里使用单个响应的拦截器
    163.         if (config.interceptors?.responseInterceptor) {
    164.           res = config.interceptors.responseInterceptor<T>(res)
    165.         }
    167.         resolve(res)
    168.       })
    169.         .catch((err: any) => {
    170.         reject(err)
    171.         // return err
    172.       })
    173.         .finally(() => {
    174.         url && this.delUrl(url)
    175.       })
    176.     })
    177.   }
    179.   get<T = any>(config: BMYRequestConfig): Promise<T> {
    180.     return this.request<T>({ ...config, method: 'GET' })
    181.   }
    183.   post<T = any>(config: BMYRequestConfig): Promise<T> {
    184.     return this.request<T>({ ...config, method: 'POST' })
    185.   }
    187.   delete<T = any>(config: BMYRequestConfig): Promise<T> {
    188.     return this.request<T>({ ...config, method: 'DELETE' })
    189.   }
    191.   put<T = any>(config: BMYRequestConfig): Promise<T> {
    192.     return this.request<T>({ ...config, method: 'PUT' })
    193.   }
    194. }
    196. export default Request
    1. import Request from './request'
    2. import { localCache } from '@/util'
    3. import type { BMYRequestInterceptors } from './request/type'
    5. const interceptors: BMYRequestInterceptors = {
    6.   requestInterceptor: (config) => {
    7.     const token = localCache.getCache('token')
    8.     if (token) {
    9.       config!.headers!.Authorization = `Bearer ${token}`
    10.     }
    11.     return config
    12.   },
    13.   requestInterceptorCatch: (err) => {
    14.     return err
    15.   },
    16.   responseInterceptor: (res) => {
    17.     return res
    18.   },
    19.   responseInterceptorCatch: (err) => {
    20.     return err
    21.   }
    22. }
    24. const baseConfig = {
    25.   timeout: 1000 * 60 * 5,
    26.   interceptors
    27. }
    29. export const sysRequest = new Request({
    30.   ...baseConfig,
    31.   baseURL: '/systemcenter/api/banmayu'
    32. })
    34. export const webRequest = new Request({
    35.   ...baseConfig,
    36.   baseURL: '/elabnoteWeb/api/banmayu'
    37. })
    39. export const materialRequest = new Request({
    40.   ...baseConfig,
    41.   baseURL: '/material/api/banmayu'
    42. })
    44. export const request = new Request({
    45.   ...baseConfig
    46. })
    48. type CancelRequest = {
    49.   url: string[] | string
    50.   request: InstanceType<typeof Request>
    51. }
    52. // 取消请求
    53. export const cancelRequest = ({ url, request }: CancelRequest) => {
    54.   return request.cancelRequest(url)
    55. }
    56. // 取消全部请求
    57. export const cancelAllRequest = (request: InstanceType<typeof Request>) => {
    58.   return request.cancelAllRequest()
    59. }