主动放弃请求 -- axios

背景:频繁切换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)