在真实项目中，当路由已经跳转，而上一页的请求还在pending状态，如果数据量小还好，数据量大时，跳到新页面，旧的请求依旧没有停止，这将会十分损耗性能，这时我们应该先取消掉之前还没有获得相应的请求，再跳转页面。这里axios给我们提供了一个方法：
cancelToken
让我们来看看cancelToken的使用方法：
官网方法一：
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
如果我要跳转页面的话，我调用source.cance()方法就可以干掉之前这个没有请求完的请求了。
但是这个方法有个弊端，就是比较麻烦，每次都要手动去调用source.cance()方法。怎么做到全局统一管理呢？
官网给了以下方法：
还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// 取消请求
cancel();
根据这个方法：我们一步一步来实现它：
在main.js里写一个全局httpRequestList的空数组，用来装我们的cancel函数：
// main.js
Vue.$httpRequestList = []
再在我们封装好的post,get请求里面，将每一个请求里面都做一个将cancel函数推入的httpRequestList数组的动作:
POST (url, data, errMsg) {
const CancelToken = axios.CancelToken
return axios.post(url, data, {
timeout: 30000,
cancelToken: new CancelToken(function executor (c) {
Vue.$httpRequestList.push(c)
})
}).then(checkStatus).then(res => checkCode(res, errMsg))
},
GET (url, params, errMsg) {
const CancelToken = axios.CancelToken
return axios.get(url, {
params: {
_t: +(new Date()),
...params
},
timeout: 30000,
cancelToken: new CancelToken(function executor (c) {
Vue.$httpRequestList.push(c)
})
}).then(checkStatus).then(res => checkCode(res, errMsg))
}
这样我们的每一个请求里面，都包含了一个cancelToken对象。
在这之后我们要写一个执行cancel方法的 方法：
import Vue from 'vue'
export const clearHttpRequestingList = () => {
if (Vue.$httpRequestList.length > 0) {
Vue.$httpRequestList.forEach((item) => {
item()
})
Vue.$httpRequestList = []
}
}
item就是之前每一个请求装进httpRequestList数组的cancel方法，item()执行后，如果该请求是pending状态，那么可以直接取消掉。执行完后记得清空httpRequestList数组。
最后我们回到main.js
在每次跳转之前执行clearHttpRequestingList()函数。
router.beforeEach((to, from, next) => {
clearHttpRequestingList()
..........这下面是你的路由验证代码..........
})
这样就实现了每次路由跳转之前，就清空之前出于pending状态的请求，优化了性能。
如下图所示：
