Commit b14a15e66ba48f5c73e691186f0617c0a06e0abf
Committed by
GitHub
GitHub
1 parent
ae5f5cb1
refactor: axios Canceler use AbortController (#2676)
Showing
1 changed file
with
33 additions
and
33 deletions
src/utils/http/axios/axiosCancel.ts
| 1 | -import type { AxiosRequestConfig, Canceler } from 'axios'; | ||
| 2 | -import axios from 'axios'; | ||
| 3 | -import { isFunction } from '/@/utils/is'; | 1 | +import type { AxiosRequestConfig } from 'axios'; |
| 4 | 2 | ||
| 5 | -// Used to store the identification and cancellation function of each request | ||
| 6 | -let pendingMap = new Map<string, Canceler>(); | 3 | +// 用于存储每个请求的标识和取消函数 |
| 4 | +const pendingMap = new Map<string, AbortController>(); | ||
| 7 | 5 | ||
| 8 | -export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&'); | 6 | +const getPendingUrl = (config: AxiosRequestConfig): string => { |
| 7 | + return [config.method, config.url].join('&'); | ||
| 8 | +}; | ||
| 9 | 9 | ||
| 10 | export class AxiosCanceler { | 10 | export class AxiosCanceler { |
| 11 | /** | 11 | /** |
| 12 | - * Add request | ||
| 13 | - * @param {Object} config | 12 | + * 添加请求 |
| 13 | + * @param config 请求配置 | ||
| 14 | */ | 14 | */ |
| 15 | - addPending(config: AxiosRequestConfig) { | 15 | + public addPending(config: AxiosRequestConfig): void { |
| 16 | this.removePending(config); | 16 | this.removePending(config); |
| 17 | const url = getPendingUrl(config); | 17 | const url = getPendingUrl(config); |
| 18 | - config.cancelToken = | ||
| 19 | - config.cancelToken || | ||
| 20 | - new axios.CancelToken((cancel) => { | ||
| 21 | - if (!pendingMap.has(url)) { | ||
| 22 | - // If there is no current request in pending, add it | ||
| 23 | - pendingMap.set(url, cancel); | ||
| 24 | - } | ||
| 25 | - }); | 18 | + const controller = new AbortController(); |
| 19 | + config.signal = config.signal || controller.signal; | ||
| 20 | + if (!pendingMap.has(url)) { | ||
| 21 | + // 如果当前请求不在等待中，将其添加到等待中 | ||
| 22 | + pendingMap.set(url, controller); | ||
| 23 | + } | ||
| 26 | } | 24 | } |
| 27 | 25 | ||
| 28 | /** | 26 | /** |
| 29 | - * @description: Clear all pending | 27 | + * 清除所有等待中的请求 |
| 30 | */ | 28 | */ |
| 31 | - removeAllPending() { | ||
| 32 | - pendingMap.forEach((cancel) => { | ||
| 33 | - cancel && isFunction(cancel) && cancel(); | 29 | + public removeAllPending(): void { |
| 30 | + pendingMap.forEach((abortController) => { | ||
| 31 | + if (abortController) { | ||
| 32 | + abortController.abort(); | ||
| 33 | + } | ||
| 34 | }); | 34 | }); |
| 35 | - pendingMap.clear(); | 35 | + this.reset(); |
| 36 | } | 36 | } |
| 37 | 37 | ||
| 38 | /** | 38 | /** |
| 39 | - * Removal request | ||
| 40 | - * @param {Object} config | 39 | + * 移除请求 |
| 40 | + * @param config 请求配置 | ||
| 41 | */ | 41 | */ |
| 42 | - removePending(config: AxiosRequestConfig) { | 42 | + public removePending(config: AxiosRequestConfig): void { |
| 43 | const url = getPendingUrl(config); | 43 | const url = getPendingUrl(config); |
| 44 | - | ||
| 45 | if (pendingMap.has(url)) { | 44 | if (pendingMap.has(url)) { |
| 46 | - // If there is a current request identifier in pending, | ||
| 47 | - // the current request needs to be cancelled and removed | ||
| 48 | - const cancel = pendingMap.get(url); | ||
| 49 | - cancel && cancel(url); | 45 | + // 如果当前请求在等待中，取消它并将其从等待中移除 |
| 46 | + const abortController = pendingMap.get(url); | ||
| 47 | + if (abortController) { | ||
| 48 | + abortController.abort(url); | ||
| 49 | + } | ||
| 50 | pendingMap.delete(url); | 50 | pendingMap.delete(url); |
| 51 | } | 51 | } |
| 52 | } | 52 | } |
| 53 | 53 | ||
| 54 | /** | 54 | /** |
| 55 | - * @description: reset | 55 | + * 重置 |
| 56 | */ | 56 | */ |
| 57 | - reset(): void { | ||
| 58 | - pendingMap = new Map<string, Canceler>(); | 57 | + public reset(): void { |
| 58 | + pendingMap.clear(); | ||
| 59 | } | 59 | } |
| 60 | } | 60 | } |