切换页面取消请求

在axios的封装文件中添加

import axios from 'axios'
let router = import("@/router");
let source = axios.CancelToken.source();

const baseURL = process.env.VUE_APP_MODE == 'development' ? '/api' : process.env.VUE_APP_API_URL

//service 循环遍历输出不同的请求方法
let instance = axios.create({
    baseURL: baseURL,
    timeout: 5000,
    validateStatus: function (status) {
        return status >= 200;  // return status >= 200 && status < 300; // 默认的
    }
    //定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。
    //如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
})

//切换页面取消请求
instance.interceptors.request.use(request => {
    request.cancelToken = source.token;
    return request;
});
router.then(lib => {
    lib.default.beforeEach((to, from, next) => {
        source.cancel()
        source = axios.CancelToken.source();
        next()
    })
})

//请求拦截器
//...

//响应拦截器
instance.interceptors.response.use(res => {
    //请求成功
   //do something 
}, (err) => {
    //...
    let isCancel = axios.isCancel(err);
    console.log("响应拦截器 err isCancel")
    console.log(isCancel)
    if (isCancel) {
        return new Promise(() => { });
    }
    return Promise.reject(
        err.response.data &&
        err.response.data.msg ||
        "网络错误"
    );
})