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);
});