欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-24 18:22:34
...

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)
}