在umijs中，使用AbortController取消已经发送的请求(打断请求)，可以解决重复请求，根据需要取消指定的Web请求

背景介绍

AbortController是一个控制器对象，可以通过new AbortController()的方式生成控制器实例对象，该控制器实例对象可以根据需要取消/打断一个或多个指定的Web请求

问题描述

多次请求同一个接口(参数不同)，数据量大的情况下接口返回时间较长，数据量小接口返回时间短，多次请求不同数据量的同一个请求就会出现最后返回的接口不是我当前最后选择的接口，而是数据量最大的接口，当我们请求新的接口时，需要取消还没有返回数据的接口

解决方案

我们通过将发送的所有请求存进队列(用数组结构)中，发送请求的时候入队(push)，请求响应的时候出队(shift)，标记所有请求。在每次发送请求的时候先判断当前请求url在请求队列中是否重复，如果重复，将队列中重复请求取消，保留当前请求。

代码实现

以下代码全写在请求配置文件中

创建一个队列：

interface obj {
  Time: Number,
  Url: string,
  Params: { [key: string]: any },
  controller: any,
  signal: any,
}
const queue: obj[] = []; //请求队列

请求拦截器方法：

/** 请求拦截器 */
const commonProcRequest = (url: string, options: RequestOptionsInit) => {
  // 每次都会创建一个新的AbortController实例，每次创建的都不一样
  const controller = new AbortController();
  const { signal } = controller;
  /** 监听打断成功后的回调 */
  signal.addEventListener('abort', () => {
    console.log('aborted!');
  });
  if (options.headers) {
    options.headers['token'] = localStorage.getItem('token');
  }
  
  console.log('queue',queue);
  /** 如果请求队列中有相同请求并且请求为获取设备，则取消请求 */
  if(queue.length >= 1 && url === '/sys/sysResource/getDeviceAll'){
    queue.forEach(item => {
      if(item.Url === '/sys/sysResource/getDeviceAll'){
        console.log('打断了创建时间为',item.Time,"的请求");
        /** 取消请求的方法 controller.abort();  */
        item.controller.abort(); 
        
      }
    })
  }
  queue.push({
    Time: new Date().getTime(),
    Url: url,
    Params: options.data,
    controller: controller, //每次创建的abortcontroller实例都不一样
    signal: signal,
  }) //入队
  
  return {
    url: url,
    options: {
      ...options,
      signal, // 将AbortSignal传给options
    },
  };
};

在请求响应处出队

responseInterceptors: [
    async (response: Response) => {
      queue.shift();
      ...
      return response;
    },
  ],

如果项目监听了请求错误，需要在错误处理方法中添加代码，屏蔽取消请求的报错：

if (res.name === 'AbortError') {
    return Promise.resolve(res);
}