如何在JavaScript中取消一个请求

这篇文章将告诉你如何在XMLHttpRequest、Fetch和常见的第三方库中取消一个请求 [axios](https://github.com/axios/axios).

在我们开始之前，有必要再次简要介绍一下Ajax。它是Asynchronous JavaScript and XML的缩写。它是Jesse James Garrett在2005年创造的一个术语，用来描述一种使用多种现有技术组合的 "新 "方法。所以它不是一种独立的技术。这种方法使网络应用程序能够对用户界面进行快速、渐进式的更新，而无需重新加载整个浏览器页面。

XMLHttpRequest和Fetch是目前浏览器提供的两个获取资源的API。axios是一个流行的三方Promise请求库，它内部使用XMLHttpRequest。

取消XMLHttpRequest请求

该 XMLHttpRequest.abort()方法中止请求，如果它已经被发送。当一个请求被中止时，它的 [readyState](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState)被改变为XMLHttpRequest.UNSENT (0)，并且请求的 [status](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status)代码被设置为0。

举例来说。

const xhr = new XMLHttpRequest();

下图是Chrome DevTools中Network的正常请求和取消请求的对比。

取消Fetch请求

如果你想取消一个Fetch请求，你需要使用AbortControllerAPI。你可以使用构造函数来创建一个新的AbortController对象。它有一个只读的属性AbortController.signal ，这是一个AbortSignal对象实例，它可以用来与DOM请求（如fetch请求）进行通信，或中止该请求。

它也有一个方法AbortController.abort() ，可以中止fetch请求，消耗任何响应体和流。

比如说。

const controller = new AbortController();

下面是一个比较。

注意，controller.abort() 支持传递一个可选的参数reason 。表示操作被中止的原因。在上面的例子中，我们没有指定它，那么它将被设置为 "AbortError" [DOMException](https://developer.mozilla.org/en-US/docs/Web/API/DOMException).

而我们也不抓紧使用try...catch 等，那么你会在Console中得到这样一个错误。

取消Axios请求

而在Axios中，从v0.22.0 ，它支持 [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)以获取API的方式取消请求。

const controller = new AbortController();const API_URL = 'http://127.0.0.1:3000/api/get';

然而，Axios目前支持CancelToken 方法来取消请求，但它已被标记为废弃的。更多信息请参见官方文档。