Vue中取消正在请求中的接口

叁歲伎倆 2022-11-14 10:20 433阅读 0赞

vue接口请求配置中加入拦截器

// request拦截器
    service.interceptors.request.use(config => { 
        // console.log("sessionStorage.token:", sessionStorage.token);
        // Do something before request is sent
        // if (store.getters.token) { 
        if (getToken()) { 
            config.headers.Authorization = getToken(); // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行编辑
          // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行编辑
        } else { 
            config.headers.Authorization = 'Basic emhpbmVuZ3d1bGlhbndhbmc6emhpbmVuZ3d1bGlhbndhbmc='; // 增加客户端认证
        }
    
        // 将请求的接口添加到数组中
        config.cancelToken = new axios.CancelToken(cancel => { 
            window._axiosPromiseArr.push({  cancel, id: config.id});
        });
    
        // console.log("request_config:", config);
        return config
    }, error => { 
        // Do something with request error
        Promise.reject(error)
    });
    
    // respone拦截器
    service.interceptors.response.use(
        response => { 
            /** * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页 * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中 */
                // console.log("respose:", response);
            const res = response.data;
            if (response.status !== 200) { 
                /* Message({ message: res.message, type: 'error', duration: 5 * 1000 }) return Promise.reject('error');*/
                console.log(res.message)
            } else { 
                return response
            }
        },
        error => { 
            const response = error.response;
            if (response === undefined) { 
                /* Message({ message: '服务请求超时！', type: 'error', duration: 5 * 1000 }) return Promise.reject(error) */
                // console.warn('服务请求超时！');
            }
    }

需要拦截的逻辑代码中写入

//遍历数组中的接口，删除请求
    try { 
        window._axiosPromiseArr.forEach((ele, index) => { 
            // console.log("ele:", ele);
            ele.cancel(); // 路由跳转之前，清空（终止）上一个页面正在请求的内容
            // 清空请求的参数 清空请求的参数
            delete window._axiosPromiseArr[index];
        });
    }
    catch (e) { 
        console.log(e)
    }