使用 abortcontroller 实例的 abort() 方法可以取消正在进行的 fetch 请求,从而中断脚本加载。只需在发起请求前创建控制器,将 signal 传入 fetch 配置中,当需要取消时调用 controller.abort() 即可触发异常。

fetch 请求如何绑定信号
通过 new AbortController() 获取控制器对象,将其中的 signal 属性作为参数传递给 fetch 函数,这样请求就与控制器关联起来。

const controller = new AbortController();
const signal = controller.signal;
fetch('https://example.com/script.js', { signal })
.then(response => response.text())
.catch(error => {
if (error.name === 'AbortError') {
console.log('请求已取消');
} else {
console.error('发生错误:', error);
}
});
// 模拟取消操作
setTimeout(() => {
controller.abort();
}, 3000);上述代码展示了标准的 fetch 请求流程。首先创建控制器并提取 signal,然后在 fetch 选项中传入该信号。随后设置一个定时器在 3 秒后调用 abort 方法。如果请求在 3 秒内未完成,就会抛出 AbortError 并被 catch 块捕获。预期结果是控制台输出“请求已取消”,且网络面板中该请求状态变为 canceled。
立即学习“Java免费学习笔记(深入)”;
XMLHttpRequest 如何取消
对于传统的 XMLHttpRequest 对象,可以直接调用其 abort() 方法来终止请求。这种方式不需要额外的控制器对象,直接操作请求实例即可。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');
xhr.onload = function() {
console.log('加载完成:', xhr.responseText);
};
xhr.onerror = function() {
console.log('加载失败或取消');
};
xhr.send();
// 模拟取消操作
setTimeout(() => {
xhr.abort();
}, 2000);这段代码演示了如何使用 XHR 取消请求。创建 XHR 实例后打开连接并发送请求,同时注册 onload 和 onerror 回调。两秒后调用 xhr.abort() 中断请求。此时 onerror 会被触发,因为 abort 被视为一种错误情况。预期结果是控制台输出“加载失败或取消”,且请求被立即终止。
取消后如何处理错误类型
当请求被取消时,系统会抛出一个名为 AbortError 的错误对象。开发者需要在 catch 块中检查错误名称,以区分正常错误和用户主动取消的情况。
try {
const controller = new AbortController();
fetch('https://example.com/api', { signal: controller.signal })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('用户取消了请求');
} else {
console.error('网络错误:', err.message);
}
});
} catch (e) {
console.error('未捕获错误:', e);
}在实际应用中,区分错误类型非常重要。AbortError 是浏览器规范定义的特定错误类型,其 name 属性值为


















