【js】连续相同请求时，如何中断还未返回的请求

需求

前端页面，用户连续翻页，或是连续筛选这样的连续请求，如果保证发起一次请求时，去中断掉上一次还未返回的请求？

代码

使用axios实现

import axios from 'axios';
import requistDuplicateBlacklist from './requistDuplicateBlacklist'

if(!window.cancelTokenSources){
  window.cancelTokenSources={}
}
// request拦截器
service.interceptors.request.use(
  (config) => {
    let key = config.url+'&'+config.method;
    if(requistDuplicateBlacklist.includes(key)){
      if(window.cancelTokenSources[key]){
        //如果之前有未完成请求，先中断
        window.cancelTokenSources[key].abort()
      }
      let controller = new AbortController();
      window.cancelTokenSources[key] = controller;
      config.signal = controller.signal 
    }
    return config;
  },
  (error) => {
    console.log(error);
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (res) => {
    let key = res.config.url+'&'+res.config.method;
    delete window.cancelTokenSources[key];
   }
  )

requistDuplicateBlacklist.js

export default [
    '/station/info/power&get',
    '/ps/power/station/findStationNumAndOwnerList&post',
    '/ps/power/station/findStationInfoByStationNum&get',
    '/ps/power/station/edit&post',
    '/ps/power/station/addMaintenanceAdvise&post',
    '/power/ts/list&get',
    '/station/inverter/month/list&get',
    '/station/inverter/year/list&get'
]

分析

1.设计了一个黑名单，用来拦截特定的接口；
2.设计了一个变量window.cancelTokenSources，用来记录已经发出还未返回的请求；
3.设置了一个请求拦截器，当请求接口属于黑名单，对该接口进行判断，如若有没有返回的接口，对4.其进行中断处理，否则将其记录在window.cancelTokenSources内；
设置了一个响应拦截器，当请求接口返回时，将该次请求从window.cancelTokenSources内删除