乐趣区

关于前端:Day-53100-如何终止发请求

jiezi

（一）需要

被问到如何终止发送的 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…

欢送关注我的公众号：国星聊成长
每周分享我学习到的成长 / 认知办法

退出移动版