JavaScript 取消请求：XMLHttpRequest、Fetch 与 Axios 详解

Fet h 请求的取消方法

原生 Fetch API 不再支持直接传入 cancel() 函数，而是引入了 AbortController。这是目前浏览器环境下最标准的取消请求方式。

第1步：创建 AbortController 实例

目的：生成一个可以控制请求生命周期的控制器对象。
动作：实例化 AbortController，获取其只读属性 signal。

const controller = new AbortController();
const { signal } = controller;

第2步：将 signal 注入 Fetch 配置

目的：将控制器与特定的 HTTP 请求关联起来。
参数：在 fetch 的 options 配置中加入 signal 字段。

void (async function () {
    try {
        const response = await fetch('<http://127.0.0.1:3000/api/get>', {
            signal: controller.signal,
        });
        const data = await response.json();
        console.log('请求成功:', data);
    } catch (error) {
        // 如果请求被中止，这里会捕获到 error.name === 'AbortError'
        if (error.name !== 'AbortError') {
            console.error('Fetch 失败:', error);
        }
    }
})();

// 模拟在 1 秒后取消请求
setTimeout(() => {
    controller.abort();
}, 1000);

执行 controller.abort() 后，浏览器控制台会抛出 AbortError。此时可以通过 try...catch 进行逻辑处理，区分是正常网络错误还是人为取消。

若需要在取消时传递具体原因，可以在 abort() 中传入自定义 Error 对象（部分新版浏览器支持）：

Axios 请求的取消方法

Axios 是一个广泛使用的基于 Promise 的 HTTP 客户端。虽然早期版本依赖已弃用的 CancelToken，但现代 Axios 版本（0.22.0+）已全面转向兼容原生的 AbortController。

第1步：配置 Axios 请求

入口：Axios 请求配置对象的 params 或 data 同级位置。
动作：复用上述 AbortController 中的 signal。

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

void (async function () {
    try {
        const response = await axios.get(API_URL, {
            signal: controller.signal,
        });
        const { data } = response;
        console.log('Axios 成功:', data);
    } catch (error) {
        if (axios.isCancel(error)) {
             console.log('请求已取消');
        } else {
             // 处理其他网络错误
        }
    }
})();

setTimeout(() => {
    controller.abort();
}, 1000);

Axios 内部封装了对 AbortSignal 的处理，使得取消逻辑比原生 Fetch 更加直观。错误捕获图中可以看到标准的 AbortError 提示：

注意：如果你使用的是非常旧的 Axios 版本且无法升级，官方文档曾推荐使用 CancelToken，但在当前工程实践中，强烈建议统一采用 AbortController 以保持规范一致性和未来兼容性。

XMLHttpRequest 的取消方法

作为底层的 XHR 对象，它提供了直观的 abort() 方法，适合需要精细控制低级通信场景的应用。

第1步：调用 abort() 中断请求

参数：无参调用。
完成状态：调用后，readyState 变为 0 (UNSENT)，status 变为 0。

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

setTimeout(() => {
    xhr.abort();
    console.log('ReadyState:', xhr.readyState); // 输出 0
    console.log('Status:', xhr.status);         // 输出 0
}, 1000);

在网络面板（Network Tab）观察，请求会被标记为 canceled。这与正常的超时或服务器断开连接不同，它是客户端主动发起的强制中断。