axios 请求拦截 取消重复请求（多次重复异步，结束pending状态）

前端开发中，会涉及很多异步事件处理，页面展示的处理关系最密切的就是loading图层，但是loading交互在一些时候会不太友好，后端同学也不喜欢loading状态（后端同学：这不就是说我的接口返回慢嘛？我的锅！）
前端函数节流防抖也是一个解决方法，但是又有一个问题是，我们处理的是异步，只要有异步就会有等待，比如，防抖时间是1s，异步事件触发了两次，就需要最快2s完成，假设第一次异步3s返回，第二次异步0.5秒返回；那出现的情况就是，第一次触发的3s异步，1s内没有返回，1s后第二次触发异步，第一次的异步还没有返回，第二次的异步就就开始了，0.5秒后第二次异步返回了，但是最终结果响应的是第一次的异步。

axios取消重复请求.png

解决方案：利用axios可以很方便的取消重复请求的pending状态，结束重复请求，只让最后一次请求通过

官方文档：http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88

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