前端开发中，会涉及很多异步事件处理，页面展示的处理关系最密切的就是loading图层，但是loading交互在一些时候会不太友好，后端同学也不喜欢loading状态（后端同学：这不就是说我的接口返回慢嘛？我的锅！）
前端函数节流防抖也是一个解决方法，但是又有一个问题是，我们处理的是异步，只要有异步就会有等待，比如，防抖时间是1s，异步事件触发了两次，就需要最快2s完成，假设第一次异步3s返回，第二次异步0.5秒返回；那出现的情况就是，第一次触发的3s异步，1s内没有返回，1s后第二次触发异步，第一次的异步还没有返回，第二次的异步就就开始了，0.5秒后第二次异步返回了，但是最终结果响应的是第一次的异步。
axios取消重复请求.png
解决方案：利用axios可以很方便的取消重复请求的pending状态，结束重复请求，只让最后一次请求通过
let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
console.log('pending',pending);
for(let p in pending){
if(pending[p].u === config.url.split('?')[0] + '&' + config.method) {
//当当前请求在数组中存在时执行函数体
pending[p].f(); //执行取消操作
pending.splice(p, 1); //数组移除当前请求
}
}
}
//请求拦截
service.interceptors.request.use(function(config) {
/*.....*/
removePending(config); //在一个axios发送前执行一下取消操作
config.cancelToken = new cancelToken((c)=>{
// pending存放每一次请求的标识，一般是url + 参数名 + 请求方法，当然你可以自己定义
pending.push({ u: config.url.split('?')[0] +'&' + config.method, f: c});//config.data为请求参数
});
/*.....*/
})
image.png
