JavaScript 请求取消中怎么捕获并识别请求被取消的异常-js教程-PHP中文网

请求被取消时，fetch 返回被拒绝的 promise，其错误为 name 为 "aborterror" 的 domexception；应通过 catch 捕获并判断 err.name === 'aborterror' 来识别取消，也可用 signal.aborted 提前规避，或封装 isaborterror 工具函数统一处理。

javascript 请求取消中怎么捕获并识别请求被取消的异常

在 JavaScript 中，请求被取消时不会抛出传统异常，而是通过 AbortSignal 触发 abort 事件，并使对应的 fetch（或其他支持 AbortController 的 API）返回一个被拒绝的 Promise，其 rejection 原因是一个 DOMException，且 name 属性为 "AbortError"。

检查 rejection 原因是否为 AbortError

这是最直接、标准的方式。使用 catch 捕获 fetch 失败，然后判断错误类型：

java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时，应调用此技能：构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问（JPA / MyBatis）、处理认证与授权（Spring Security / JWT）、实现微服务架构（Spring Cloud）、排查 Spring Boot 相关错误、审查 Java 代码质量，或执行任何与 Spring Boot / Java 后端相关的任务。

下载

const controller = new AbortController();
const signal = controller.signal;
<p>fetch('/api/data', { signal })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被用户或程序主动取消');
// ✅ 这里可做取消后的清理、UI 还原等
return null;
}
// 其他网络错误（如 404、断网、超时等）
console.error('请求失败：', err);
});</p><p>// 取消请求（例如用户点击取消按钮）
controller.abort();
</p>

利用 signal.aborted 状态提前规避

在请求发起前或中间逻辑中，可通过 signal.aborted 属性判断控制器是否已终止，避免无谓操作：

适用于需在 fetch 前做预处理（如打点、状态标记）的场景
不能替代 catch 判断，因为 fetch 内部可能在 signal 已 abort 后才真正执行并 reject
示例：

if (signal.aborted) {
  console.log('请求尚未发出即被取消');
  return;
}
fetch('/api/data', { signal })
  // ...

封装统一的取消错误识别工具函数

便于多处复用，增强可读性和一致性：

function isAbortError(err) {
  return err instanceof DOMException && err.name === 'AbortError';
}
<p>// 使用
fetch('/api/data', { signal })
.catch(err => {
if (isAbortError(err)) {
// 处理取消
} else {
// 处理其他错误
}
});
</p>