(一)需要
被问到如何终止发送的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/archiv...
写在最初的话
学习路上,经常会懈怠
《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy...
欢送关注我的公众号:国星聊成长
每周分享我学习到的成长/认知办法