Day 219/300 如何终止发请求

（一）需求

被问到如何终止发送的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
或者可以关注我的公众号：国星聊成长（我会分享成长的方法）