canrd-outside / order-erp-front · Commits

Commit b14a15e66ba48f5c73e691186f0617c0a06e0abf

Authored by Kirk Lin
Committed by GitHub
1 parent ae5f5cb1

refactor: axios Canceler use AbortController (#2676)

Inline Side-by-side
Showing 1 changed file with 33 additions and 33 deletions
src/utils/http/axios/axiosCancel.ts
  View file @b14a15e
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 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 16 this.removePending(config);
17 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 43 const url = getPendingUrl(config);
44   -
45 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 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 }
... ...