axios本质上是基于promise对原生XMLHttpRequest的封装,在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest
axios的config中提供了一个 AbortController(新)与cancelToken(旧)的属性来取消请求。
下面有两种方式取消请求。
- 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();
- 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 取消多个请求。