axios 如何取消请求

wytraining

已于 2023-05-07 10:52:43 修改

阅读量1.4k

点赞数

文章标签：前端 javascript vue.js

于 2023-05-06 15:16:23 首次发布

本文链接：https://blog.csdn.net/wytraining/article/details/130527708

版权

文章介绍了如何使用Axios库中的AbortController和CancelToken来取消HTTP请求。AbortController是从v0.22.0版本开始支持的新方法，而CancelToken则是之前版本中用于取消请求的方式，但已在新项目中被弃用。用户可以通过这些机制在需要时中断请求，例如在操作取消或有新的数据需求时。

摘要由CSDN通过智能技术生成

axios 取消请求的方法：

1.AbortController

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

2.CancelToken（已废弃）

还可以使用 cancel token 取消一个请求，Axios 的 cancel token API 是基于被撤销 cancelable promises proposal。（此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用）

使用方式：
可以使用 CancelToken.source 工厂方法创建一个 cancel token ，如下所示：

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 {
    // 处理错误
  }
});

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

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

3.在过渡期间，可以使用这两种取消 API，即使是针对同一个请求，并可以使用同一个 cancel token 或 signal 取消多个请求：

const controller = new AbortController();

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

axios.get('/user/12345', {
  cancelToken: source.token,
  signal: controller.signal
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

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

// 取消请求 (message 参数是可选的)
source.cancel('Operation canceled by the user.');
// 或
controller.abort(); // 不支持 message 参数

axios官网
 【实战】Axios取消请求 - CancelToken