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