一、前言

对于取消请求，Axios有两种实现方式，CancelToken和 AbortController。

CancelToken自v0.22.0版本被打上 👎deprecated 的标记，意味着废弃，可以使用但不推荐使用。如下所示：

上图来源

CancelToken的使用可见模糊搜索，搜索框值改变后，网络不稳定等因素，导致返回的结果先后顺序不同

这里介绍下把CancelToken改为新的APIAbortController实现

二、AbortController介绍

这里引用MDN AbortController的说明：

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

属性：AbortController.signal返回一个 AbortSignal 对象实例，它可以用来 with/abort 一个 Web（网络）请求。

方法：AbortController.abort()中止一个尚未完成的 Web（网络）请求。这能够中止 fetch 请求及任何响应体的消费和流。

• 以下vue代码示例，可直接运行

• 更多关于AbortController的介绍，可参见用了这么久的CancelToken，Axios竟推荐用AbortController取而代之

三、将之前封装的CancelToken使用AbortController实现

• 下面是对AbortController的封装

  // requestAbort.ts
  let pendings = new Map();
  
  // 添加请求
  const addPending = (config: any) => {
    const { url, methods, params, data, headers } = config;
    const id = headers.cancel ? [url, methods].join('&') : [url, methods, JSON.stringify(params), JSON.stringify(data)].join('&');
    const cancel = pendings.has(id);
    const Abort = new AbortController()
    config = { ...config, signal: Abort.signal }
    if (!cancel) {
        // 不存在，就存进去
        pendings.set(id, Abort)
    }
    return config;
  }
  // 删除请求
  const removePending = (config: any) => {
    const { url, methods, params, data, headers } = config;
    const id = headers.cancel ? [url, methods].join('&') : [url, methods, JSON.stringify(params), JSON.stringify(data)].join('&');
    const cancel = pendings.has(id);
    const AbortController = pendings.get(id);
    if (cancel && typeof AbortController === 'object') {
        // 存在这个请求，删除
        AbortController.abort()
        pendings.delete(id);
    }
  }
  // 清除所有请求
  const clearPendings = () => {
    pendings.forEach((o: { abort: Function }) => { o.abort() })
  }
  export default { addPending, removePending, clearPendings }

• 两种方式对比如下：