美文网首页
主动放弃请求 -- 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