美文网首页
axios多次请求使用CancelToken

axios多次请求使用CancelToken

作者: 周郭郭先生 | 来源:发表于2022-02-21 17:10 被阅读0次

    1

    let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
                let cancelToken = axios.CancelToken;
                let removePending = (config) => {
                    // console.log(config);
                    for(let i in pending){
                        if(pending[i].url === axios.defaults.baseURL+config.url) { //在当前请求在数组中存在时执行取消函数
                            pending[i].f(); //执行取消操作
                            //pending.splice(i, 1); 根据具体情况决定是否在这里就把pending去掉
                            console.log(pending[i].url);
                        }
                    }
                }ÏÏ
    

    2

    axios.interceptors.request.use(config => {
                    removePending(config); //在一个axios发送前执行一下判定操作,在removePending中执行取消操作
                    // console.log(config.url);
                    config.cancelToken = new cancelToken(function executor(c){//本次axios请求的配置添加cancelToken
                    pending.push({
                        // url: config.url,
                        url: axios.defaults.baseURL+config.url,
                        f:c
                    }); 
                    // console.log(axios.defaults.baseURL+config.url);
                    //将本次的url添加到pending中,因此对于某个url第一次发起的请求不会被取消,因为还没有配置取消函数
                });
                    return Promise.resolve(config);
                }, error => {
                    return Promise.reject(error)
                })
                axios.interceptors.response.use(data => { 
                    // removePending(data.config); //在一个axios响应后再执行一下取消操作,把已经完成的请求从pending中移除
                    // console.log(data.config);//如果返回undefined说明被拦截了
                    return Promise.resolve(data)
                    
                    }, error => {
                    //加载失败
                    return {'data':{}}
                    })Ï
    

    相关文章

      网友评论

          本文标题:axios多次请求使用CancelToken

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