axios 使用 cancel token 取消请求

axios 使用 cancel token 取消请求

业务场景

1. 在项目中切换路由，停止原路由中的正在请求的接口

在我参与的项目中有的页面在进入时会调用多个接口，并且这些接口可能会几秒后才请求完；在用户切换路由时这些接口就没有必要再请求了；

如果需求只是要在切换路由是取消之前的全部接口，使用下面的方法就可以实现；如果还有取消具体的某一个接口的需求，那么请看业务场景2的实现方式；

实现代码如下：

// 使用 CancelToken.source
// CancelToken.source 方法会构建一个 CancelToken 对象，并返回一个有两个参数的对象( token、cancel )
// token -> 构建出的 CancelToken 对象
// cancel -> 取消请求需要调用的方法
// 由于 CancelToken 对象是在拦截器外构建的，所有的接口中的 config.cancelToken 指向的都是同一个 CancelToken 对象，所以可以使用 source.cancel 方法取消所有的接口
import $store from '../store/index'; // 引入 store

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

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
   
    config.cancelToken = source.token
    
    // 此处使用 store 存储取消接口的方法，便于在其他地方调用
    let arr = $store.getters.getCancelTokenList
    arr.push(source.cancel)
    $store.commit('setCancelTokenList', arr)
    
    // 我见过有人在 main.js 中直接声明变量( Vue.prototype.$sourceCancel = null ) ，拦截器中进行赋值，再在需要的地方调用
    // 不知道这种方法的好处或者坏处，如果有人了解，欢迎评论
    // $sourceCancel = source.cancel
    return config;
}, function (error) {
   
    // 预处理请求有异常（error）时抛出错误
    return Promise.reject(error);
});