1.这两天公司有个小项目 用的vue写。但是上一个路由的请求结果在当前路由页面提示，非常难看。所以就有了这个需求。
2.刚开始 想这个还不简单吗？ 面向百度编程： 打开百度=> 输入标题=> 然后看了同行的各种操作。。。。一顿操作猛如虎，一看战绩0:5,我绝望了。尼玛 取消的我所有请求都发不出去了。
3 直到我看到一个人的链接github.com/axios/axios…。感谢 Chobits 同学。打开一看感觉好熟悉，那就看看吧。我靠 这不是axios github地址吗？ 然后看了官网实例，醍醐灌顶。。。我走了多少弯路。所以推荐以后还是 官方文档作为第一选项。
4.下面说说下实现思路：
第一步： axios 怎么取消：
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// An executor function receives a cancel function as a parameter
cancel = c;
})
});
// cancel the requestcancel();
cancel()第二步： 这是取消一个axios 如果是多个呢？那么我们就需要有个地方给存下来。我本来打算用vuex 但是我这是小项目，本来就没用vuex，所以就直接创建个文件store.js
let store = {_axiosPromiseCancel: [] };
export default store;第三步： axios 拦截器axios.js( 简化版)
import store from './store';
const CancelToken = axios.CancelToken;
axios.interceptors.request.use(config=>{
// 这个是 取消重点
config.cancelToken = new CancelToken((cancel) => {
store._axiosPromiseCancel.push(cancel);
});
return config;
});
axios.interceptors.response.use(res=>{
// do something...
},error=>{
if (axios.isCancel(error)) {
// 为了终结promise链 就是实际请求 不会走到.catch(rej=>{});这样就不会触发错误提示之类了。
return new Promise(() => {});
}else{
return Promise.reject(error)
}});第四步： 就是在router 里做取消动作了 router.js
import store from './store';
router.beforeEach((to, from, next) => {
store._axiosPromiseCancel.forEach(e=>{
e && e()
});
store._axiosPromiseCancel = [];
})好了，代码我们搞定了。那么我们看看效果
可以看到 我们多么渴望的 cancel 出现了。控制台只打印了 cancel信息 而没有 打印出.catch 里面的信息。说明 promise链也终止了。
之前有个关于前后端缓存的问题，我也是花半天时间解决了，但是没有记录。都忘记怎么解决了。 现在把这个记下来，当个笔记吧。
总结： 有不对之处 还请大佬们多指正。
