本文将向您展示如何取消 XMLHttpRequest、Fetch 和常用第三方库中的请求axios。
在开始之前，有必要再次简要介绍一下 Ajax。它是异步 JavaScript 和 XML的缩写。这是 Jesse James Garrett 在 2005 年创造的一个术语，用于描述使用多种现有技术组合的“新”方法。所以它不是一个单独的技术。这种方法使 Web 应用程序能够对用户界面进行快速、增量更新，而无需重新加载整个浏览器页面。
XMLHttpRequest 和 Fetch 是目前浏览器提供的两个获取资源的 API。axios 是一个流行的三方 Promise 请求库，内部使用 XMLHttpRequest。
取消 XMLHttpRequest 请求
XMLHttpRequest.abort()如果请求已经发送，该方法将中止请求。当一个请求被中止时，它readyState被更改为XMLHttpRequest.UNSENT(0) 并且请求的status代码被设置为 0。
例如:
const xhr = new XMLHttpRequest();
xhr.open('GET', ' http://127.0.0.1:3000/api/get' , true);
xhr.send();
setTimeout(() => {
xhr.abort();
}, 1000);
下图是 Chrome DevTools 中 Network 中正常请求和取消请求的对比
取消fetch请求
如果要取消 Fetch 请求，则需要使用AbortController API。您可以使用构造函数创建一个新的 AbortController 对象。它有一个只读属性AbortController.signal，它是一个AbortSignal对象实例，可用于与 DOM 请求（例如 fetch 请求）进行通信或中止。
它还有一个方法AbortController.abort()可以中止获取请求、任何响应主体的消耗和流。
例如：
const controller = new AbortController();
void (async function () {
const response = await fetch('http://127.0.0.1:3000/api/get', {
signal: controller.signal,
});
const data = await response.json();
})();
setTimeout(() => {
controller.abort();
}, 1000);
下面是一个对比：
请注意，controller.abort()支持传递可选参数reason。指示操作被中止的原因。在上面的例子中，我们没有指定它，那么它将被设置为 "AbortError" DOMException
而且我们也没有捕捉错误，然后你会在控制台中得到这样的错误。
;
const API_URL = 'http://127.0.0.1:3000/api/get';
void (async function () {
const response = await axios.get(API_URL, {
signal: controller.signal,
});
const { data } = response;
})();
setTimeout(() => {
controller.abort();
}, 1000);
下面是一个对比：
这是未捕获的错误：
虽然，axios 目前支持CancelToken取消请求的方法，但是已经被标记为 deprecated。更多信息请参见官方文档。
我是南飞雁，你可以叫我飞雁，我是一名奋斗者，在实现财富自由的路上……
我喜欢分享，也喜欢思考；我有自己的人生规划和梦想；但有时也很迷茫……
我从事IT行业，研究的技术领域相对比较多而杂： PHP、MySQL、Linux、JavaScript、Node.js、NoSQL、PhotoShop、音视频处理、架构集群、网络通信、生活技巧、人生三观、做人做事读书……
我总是会在自己的公众号和掘金上写下自己的所思所想和近期要做的事，希望你关注我，我是一个奋斗者，我叫南飞雁
