美文网首页
主动放弃请求 -- axios

主动放弃请求 -- axios

作者: 在小白的路上越走越远 | 来源:发表于2021-07-06 10:10 被阅读0次

背景:频繁切换tab,点击时的顺序是12345,但返回可能是12453。那么会导致页面看到的内容错乱。

参考链接:https://www.jianshu.com/p/22b49e6ad819

let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识(这里使用的唯一标识为数组中对象的属性url,来判断是否取消)

let removePending = (ever) => {
    pending.forEach((item,index)=>{
        if(item.url === ever.url + '&' + ever.method) { //当前请求在数组中存在时执行函数体
            item.cancel(); //执行取消操作
            pending.splice(index, 1); //把这条记录从数组中移除
        }
    })
}

// 请求发送处理
service.interceptors.request.use(
    config => {
        removePending(config);
        config.cancelToken = new axios.CancelToken(cancel=>{
            pending.push({url:config.url + '&' + config.method,cancel})
        })
        return config;
    },
);

// respone拦截器
service.interceptors.response.use(
    response => {
        removePending(response.config);
    },
);

相关文章

网友评论

      本文标题:主动放弃请求 -- axios

      本文链接:https://www.haomeiwen.com/subject/kxloultx.html