(一)需求
被问到如何终止发送的HTTP请求时,被问到了,于是总结记录如下。
(二)终止请求的三种方式
1、终止一个XHR请求
var xhr=XMLHttpRequest;
xhr.abort()
2、终止Fetch
AbortController.abort()
与 XHR 的 abort()
方法不同的是,AbortController.abort() 方法一旦被调用,则被标记的 Fetch 不可再次发起请求,这一点和 Axios 中终止请求的机制是一致的。
3、终止一个 Axios 请求
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
/**
* 开始一个 Axios Post 请求
*/
function axiosPost() {
axios.post(url, undefined, {
cancelToken: source.token,
}).then(function(res) {
console.log('Axios: ', res.data);
}).catch(e => {
console.log('Axios error: ', e);
});
}
/**
* 终止一个 Axios 请求
*/
function abortAxios() {
console.log('尝试终止 axios 请求');
source.cancel('axios 被终止');
}
Axios 的
cancel()
方法实现的效果类似于 AbortController 接口的abort()
方法,即一旦该方法被调用,则该实例就不再被允许再次发送网络请求。但 Axios 网络请求是基于 XHR 实现的,终止网络请求的方法也是调用了 XHR 的abort()
方法。之所以其效果和XHR.abort()
终止后仍可再次请求的效果不一致,是因为 Axios 基于 Promise 进行了封装,一旦调用了cancel()
方法,Promise 就会抛出异常,并且被记录。下次再次调用该实例进行请求时,会直接抛出异常,不会发起网络请求。具体实现方法请查阅 Axios 源码。
参考链接
https://www.hozen.site/archives/25/
写在最后的话
学习路上,常常会懈怠
《有想学技术需要监督的同学嘛~》
https://mp.weixin.qq.com/s/FyuddlwRY7DsHUejCjiVug
如果有需要的伙伴,可以加我微信:learningisconnecting
或者可以关注我的公众号:国星聊成长(我会分享成长的方法)