vue axios路由跳转取消所有请求

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链也终止了。

之前有个关于前后端缓存的问题，我也是花半天时间解决了，但是没有记录。都忘记怎么解决了。 现在把这个记下来，当个笔记吧。

总结： 有不对之处 还请大佬们多指正。

转载于:https://juejin.im/post/5c3ea11c51882525aa507f0d