在Axios中特定的情况下取消当前正在进行的请求

应用场景

例如，在后台管理系统开发中，用户登陆态失效了（例如接口返回 401），这时页面上后续的请求都是无效的，为了防止出现 多个相同的tost提示弹窗（或者不想发送这些无效请求）

取消请求

使用 cancel token 取消请求

官方示例：

可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

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

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

在公共请求封装axios实例中使用

例如：下面为 vue + element-ui项目中的公共请求方法封装参考，具体项目可以自行实现

在接口出现状态码为401的情况下取消后续的全部请求

import axios from 'axios'
import {Message,Loading} from 'element-ui'
import router from "../router/index"
let loading;
//axios取消请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
//创建axios实例
const service = axios.create({
    baseURL:'/api',
    headers:{//公共请求头

    },
    cancelToken: source.token,//取消请求的token（一定要加）
    timeout:15000,//超时时间
});
// 请求拦截器
service.interceptors.request.use((config) => {
    loading = Loading.service({
        lock: true,
        customClass: "z-index:9999999",
        text: "加载中，请稍后...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
    });
    //设置请求头token
    config.headers.token = localStorage.getItem("token") ? localStorage.getItem("token") : '';
    return config
}, (error) => {
    return Promise.resolve(error)
});
//响应拦截器
service.interceptors.response.use((response) =>{
    loading.close();
    if (response.status === 200) {
        return Promise.resolve(response);
    }else{
        return Promise.reject(response);
    }
},(error) =>{
    loading.close();
    if(error.code = 'ECONNABORTED' && error.message.indexOf('timeout') ! -1){
        Message.error({message: "请求超时"});
    }else if(error.response.status == 401){
        Message.error({message: "无权访问，请重新登陆"});
        localStorage.removeItem("token");
        source.cancel(); // 取消其他正在进行的请求
        router.push('/login') // 到登录页重新登陆

    }else{
        Message.error({message: "请求异常"});
    }
    return Promise.reject(response);
});

//导入axios示例
export default service