vue axios - CancelToken

CancelToken:取消上一个路由未响应的接口

1.新建一个CancelToken.js,定义一个全局变量

export default class CancelToken {
   static cancelRequest = { // static类型不用实例化，可直接调用
        source: {
            token: null,
            cancel: null
        }
    };
}

 

2.在封装的axios请求中，新增请求拦截器

// 请求拦截器
axiosInstance.interceptors.request.use(config => {
    config.cancelToken = CancelToken.cancelRequest.source.token;
    return config;
}, error => Promise.reject(error));

 

3.在main.js中进行路由拦截

// 取消上一路由pending接口
router.beforeEach((to, from, next) => {
    CancelToken.cancelRequest.source.cancel && CancelToken.cancelRequest.source.cancel("取消请求");
    CancelToken.cancelRequest.source = axios.CancelToken.source();
    console.log(CancelToken.cancelRequest.source);
    next();
});

 

参考链接: cancelToken