refactor: axios

src/utils/http/axios/Axios.ts

@@ -76,7 +76,10 @@ export class VAxios {
    * @description: Interceptor configuration 拦截器配置
    */
   private setupInterceptors() {
-    const transform = this.getTransform()
+    const {
+      axiosInstance,
+      options: { transform }
+    } = this
     if (!transform) {
       return
     }
@@ -86,12 +89,11 @@ export class VAxios {
 
     // 请求拦截器配置处理
     this.axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
-      // 如果开启取消重复请求，则禁止取消重复请求
-      // @ts-ignore
-      const { ignoreCancelToken } = config.requestOptions
-      const ignoreCancel = ignoreCancelToken !== undefined ? ignoreCancelToken : this.options.requestOptions?.ignoreCancelToken
+      const { requestOptions } = this.options
+      const ignoreCancelToken = requestOptions?.ignoreCancelToken ?? true
+
+      !ignoreCancelToken && axiosCanceler.addPending(config)
 
-      !ignoreCancel && axiosCanceler.addPending(config)
       if (requestInterceptors && isFunction(requestInterceptors)) {
         config = requestInterceptors(config, this.options)
       }
@@ -157,8 +159,7 @@ export class VAxios {
     responseInterceptorsCatch &&
       isFunction(responseInterceptorsCatch) &&
       this.axiosInstance.interceptors.response.use(undefined, (error) => {
-        // @ts-ignore
-        return responseInterceptorsCatch(this.axiosInstance, error)
+        return responseInterceptorsCatch(axiosInstance, error)
       })
   }
 

src/utils/http/axios/axiosCancel.ts

@@ -1,59 +1,60 @@
-import type { InternalAxiosRequestConfig, Canceler } from 'axios'
-import axios from 'axios'
-import { isFunction } from '@/utils/is'
+import type { AxiosRequestConfig } from 'axios'
 
-// Used to store the identification and cancellation function of each request
-let pendingMap = new Map<string, Canceler>()
+// 用于存储每个请求的标识和取消函数
+const pendingMap = new Map<string, AbortController>()
 
-export const getPendingUrl = (config: InternalAxiosRequestConfig) => [config.method, config.url].join('&')
+const getPendingUrl = (config: AxiosRequestConfig): string => {
+  return [config.method, config.url].join('&')
+}
 
 export class AxiosCanceler {
   /**
    * 添加请求
-   * @param {Object} config
+   * @param config 请求配置
    */
-  addPending(config: InternalAxiosRequestConfig) {
+  public addPending(config: AxiosRequestConfig): void {
     this.removePending(config)
     const url = getPendingUrl(config)
-    config.cancelToken =
-      config.cancelToken ||
-      new axios.CancelToken((cancel) => {
+    const controller = new AbortController()
+    config.signal = config.signal || controller.signal
     if (!pendingMap.has(url)) {
-          // 如果当前没有待处理的请求，添加它
-          pendingMap.set(url, cancel)
+      // 如果当前请求不在等待中，将其添加到等待中
+      pendingMap.set(url, controller)
     }
-      })
   }
 
   /**
-   * @description: 清除所有待处理
+   * 清除所有等待中的请求
    */
-  removeAllPending() {
-    pendingMap.forEach((cancel) => {
-      cancel && isFunction(cancel) && cancel()
+  public removeAllPending(): void {
+    pendingMap.forEach((abortController) => {
+      if (abortController) {
+        abortController.abort()
+      }
     })
-    pendingMap.clear()
+    this.reset()
   }
 
   /**
-   * 删除请求
-   * @param {Object} config
+   * 移除请求
+   * @param config 请求配置
    */
-  removePending(config: InternalAxiosRequestConfig) {
+  public removePending(config: AxiosRequestConfig): void {
     const url = getPendingUrl(config)
-
     if (pendingMap.has(url)) {
-      // 如果有当前请求标识符处于pending状态，则需要取消当前请求并移除
-      const cancel = pendingMap.get(url)
-      cancel && cancel(url)
+      // 如果当前请求在等待中，取消它并将其从等待中移除
+      const abortController = pendingMap.get(url)
+      if (abortController) {
+        abortController.abort(url)
+      }
       pendingMap.delete(url)
     }
   }
 
   /**
-   * @description: reset
+   * 重置
    */
-  reset(): void {
-    pendingMap = new Map<string, Canceler>()
+  public reset(): void {
+    pendingMap.clear()
   }
 }

src/utils/http/axios/axiosTransform.ts

@@ -1,7 +1,7 @@
 /**
  * Data processing class, can be configured according to the project
  */
-import type { InternalAxiosRequestConfig, AxiosResponse, AxiosRequestConfig } from 'axios'
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
 import type { RequestOptions, Result } from '@/types/axios'
 
 export interface CreateAxiosOptions extends AxiosRequestConfig {
@@ -12,7 +12,7 @@ export interface CreateAxiosOptions extends AxiosRequestConfig {
 
 export abstract class AxiosTransform {
   /**
-   * @description: 请求前的流程配置
+   * @description: 在发送请求之前调用的函数。它可以根据需要修改请求配置
    */
   beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig
 
@@ -44,5 +44,5 @@ export abstract class AxiosTransform {
   /**
    * @description: 请求之后的拦截器错误处理
    */
-  responseInterceptorsCatch?: (axiosInstance: AxiosResponse, error: Error) => void
+  responseInterceptorsCatch?: (axiosInstance: AxiosInstance, error: Error) => void
 }