更改路由使用vue-router时中止所有Axios请求

当我使用vue-router更改路由时，如何在完成之前中止/取消Axios请求。

当用户打开页面时，它会自动发送axios请求以获取一些数据，但是用户不等待获取响应，则他正在通过vue-router更改路由，这将是很多Axios请求

那我的问题有什么解决办法吗

我没有测试，但这应该可以。

基本上，您必须生成一个全局取消令牌

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

并通过在config参数中传递它在所有请求中使用

GET请求：

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

POST请求：

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

然后，在vue-router beforeEach导航防护中，您可以使用以下命令取消所有请求：

source.cancel('Operation canceled by the user.');

这是官方的axios取消指南：https：//github.com/axios/axios#cancellation