axios如何中断请求

Axios使用最多的就是发送GET、POST请求，但是，最近遇到一个问题，就是需要中断请求，查找了很多资料，尝试之后可行，于是就写了这一遍文章，希望能帮助更多的人。

在v0.22.0之前，可以使用CancelToken发起取消请求。需要注意的是在GET请求中CancelToken作为第二个参数传入，在POST请求中CancelToken作为第三个参数传入

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

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

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

// 参数可选
source.cancel('用户发起了取消操作');

你也可以通过构造函数形式执行取消操作。

const CancelToken = axios.CancelToken;
let cancel;

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

// 取消请求
cancel();

但是，从v0.22.0开始，Axios支持AbortController以获取API的方式取消请求。具体如下：

const controller = new AbortController();

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

仔细分析了一下AbortController，发现，当请求初始化时，我们将AbortSignal作为一个选项传递进入请求的选项对象中（上面的 {signal}）。这将signal和controller与 请求相关联，并且允许我们通过调用AbortController.abort()去终止它。

当abort()被调用时，这个promise将reject一个名为AbortError的DOMException。如果，你查看一下源码，你会发现，CancelToken内部也是promise对象，当调用cancel方法后，会理解执行取消请求，同时调用reject让外层的promise的reject执行。

本文参考文献：
Axios官网、
MDN Web Docs