需求

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

代码

使用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内删除