axios取消请求

• 在发送第二次请求的时候如果第一次请求还未返回，则取消第一次请求，以保证后发送的请求返回的数据不会被先发送的请求覆盖。
• 在做vue项目的时候，接口请求很慢，影响了页面之间的切换，使之出现卡顿的情况，于是研究了一下axios取消请求。
• 在一个页面开始进行加载的时候，取消上个页面的服务器请求（不管有没有请求结束，强制结束请求）

axios官方文档取消请求说明（有两种方式，我选择我喜欢的）

const CancelToken = axios.CancelToken;
let cancel;
 
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor函数接收cancel函数作为参数
    cancel = c;
  })
});
 
// 取消请求
cancel();

我的实际操作

• 在config.js文件

• 在store.js文件

const state = {  //要设置的全局访问的state对象
  cancelTokenArr: [],//取消网络请求数组
};

const mutations = {
  pushToken(state,payload) {
    state.cancelTokenArr.push(payload.cancelToken)
  },
  clearToken({cancelTokenArr}) {
    cancelTokenArr.forEach(item => {
      item('取消网络请求')
    })
    cancelTokenArr = [];
  },
}

• main.js文件，在router.beforeEach中关闭上个页面所有的请求