应用场景:用户登录太长时间token过期,导致后续请求异常,需要及时弹框提醒用户跳转到登录页重新登录。如果在全局axios做了弹出框提示处理,那么当token过期的后续请求接口有很多个时,弹出框对应的就会有很多个。这时我们就需要阻止其他后续接口的请求,使弹框提示只弹出一次,提高用户体验。

实现方法:亲测有效!原博地址

request.js


const cancelToken = axios.CancelToken
const source = cancelToken.source()

axios.interceptors.request.use(
    config => {
        config.cancelToken = source.token; // 全局添加cancelToken
            return config;
        },
        err => {
            return Promise.reject(err);
        }
   )

axios.interceptors.response.use(
    response => {
        // 登录失效101
        if ( response.data.code===101) {
            source.cancel('登录信息已过期'); // 取消其他正在进行的请求
           // some coding
        }
        return response;
    },
    error => {
        if (axios.isCancel(error)) { // 取消请求的情况下,终端Promise调用链
            return new Promise(() => {});
        } else {
            return Promise.reject(error);
        }
    }
)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐