JavaScript 中 XMLHttpRequest、Fetch 和 axios 取消请求的方法

引言

在 JavaScript 中，实现异步网络请求主要依赖浏览器提供的两个核心 API：XMLHttpRequest 和 Fetch。目前广泛使用的 Promise 封装库 axios，其底层实现也是基于 XMLHttpRequest。

本文将分别讲解 XMLHttpRequest、Fetch 以及 axios 这三种方式是如何实现“取消请求”功能的。

接下来直接开始介绍具体实现方法。

XMLHttpRequest 取消请求

当请求已经发出后，可以通过调用 XMLHttpRequest 对象的 abort() 方法来取消该请求。具体代码示例如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', '<http://127.0.0.1:3000/api/get>', true);
xhr.send();
setTimeout(() => {
	 xhr.abort();
}, 1000);

执行取消操作后，请求的 readyState 状态将变为 XMLHttpRequest.UNSENT（即 0）；同时，xhr.status 属性会被重置为 0。

可以通过 Chrome DevTools 的 Network 面板，对比正常请求与取消请求的状态差异，如下图所示：

Fetch 取消请求

要取消 Fetch 请求，需要使用 AbortController API。首先构造一个 controller 实例：const controller = new AbortController()。该控制器包含一个只读属性 AbortController.signal，可将其作为参数传递给 fetch 方法，从而将控制器与获取请求关联起来。

具体代码示例如下：

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() 方法中传入一个表示“取消请求原因”的参数，并在调用处使用 try...catch 语句来捕获由此引发的错误。

axios 取消请求

axios 同样支持通过 AbortController 来取消请求。

const controller = new AbortController();
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 方法已被官方弃用，更多详细信息请参阅官方文档：axios-http.com/docs/cancel…；

以上就是 JavaScript 中取消请求方法的详细内容，更多关于 JavaScript 取消请求的资料请关注本站其它相关文章！