axios 请求拦截 取消重复请求(多次重复异步,结束pending状态)
前端开发中,会涉及很多异步事件处理,页面展示的处理关系最密切的就是loading图层,但是loading交互在一些时候会不太友好,后端同学也不喜欢loading状态(后端同学:这不就是说我的接口返回慢嘛?我的锅!)
前端函数节流防抖也是一个解决方法,但是又有一个问题是,我们处理的是异步,只要有异步就会有等待,比如,防抖时间是1s,异步事件触发了两次,就需要最快2s完成,假设第一次异步3s返回,第二次异步0.5秒返回;那出现的情况就是,第一次触发的3s异步,1s内没有返回,1s后第二次触发异步,第一次的异步还没有返回,第二次的异步就就开始了,0.5秒后第二次异步返回了,但是最终结果响应的是第一次的异步。
解决方案:利用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为请求参数
});
/*.....*/
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。