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

Question

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

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

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

原文由 Ghyath Darwish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2022 更新 |公理 (0.22.0+)

---

CancelToken 已弃用。现在应该在新项目中使用 AbortController。实施更清洁。

 const controller = new AbortController();

在 配置参数 中传递控制器：

 axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});

要 取消 请求，只需使用：

 controller.abort()

来源： https ://github.com/axios/axios#cancellation

原文由 m0r 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

更新：Axios (0.22.0+)

CancelToken 现已弃用。使用 AbortController 检查@m0r 的更新解决方案答案。这是官方文档的链接：

https://axios-http.com/docs/cancellation

原答案

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

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

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

获取请求：

 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 navigation guard 中，您可以使用以下命令取消所有请求：

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

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

原文由 Fab 发布，翻译遵循 CC BY-SA 4.0 许可协议