axios 中断请求

axios本质上是基于promise对原生XMLHttpRequest的封装，在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest

axios的config中提供了一个 AbortController(新)与cancelToken(旧)的属性来取消请求。

下面有两种方式取消请求。

1. AbortController

AbortController对象
Node.js v15.0.0 提供了一个全局实用 API AbortController，根据文档说明我们可以了解到AbortController接口代表一个控制器对象，允许你在需要时中止一个或多个Web(网络)请求。

你可以使用AbortController.AbortController()构造函数创建一个新的AbortController对象。 使用AbortSignal 对象完成与Web(网络)请求的通信。

简单来说就是1. 创建一个AbortController对象abortController，2. 使用abortController.signal生成关联变量signal 再添加到fetch请求参数中去，3. 想要中断的时候使用关联该请求abortController.abort()方法是使该请求中断

Pepper是我对axios进行的二次封装

const controller = new AbortController();

await Pepper.post('/api/big_file/cancel', {
    upload_token: uploadToken.value,
    file_url: uploadFileUrl.value
  },{signal: controller.signal});

// 在想要中断的地方写到
controller.abort();

2. CancelToken【但是v0.22.0 开始已被弃用】
   文档

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


await Pepper.post('/api/big_file/cancel', {
    upload_token: uploadToken.value,
    file_url: uploadFileUrl.value
  },{ cancelToken: source.token});

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

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

const CancelToken = axios.CancelToken;
let cancel;

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

// 取消请求
cancel();

注意: 可以使用同一个 cancel token 或 signal 取消多个请求。

参考链接
https://zhuanlan.zhihu.com/p/500054603