html实现AbortController请求取消_html AbortController取消fetch请求【全面解析】-html教程-PHP中文网

AbortController 是浏览器提供的用于中止异步操作的信号机制，必须在需主动取消 fetch 请求（如页面切换、搜索防抖、组件卸载）时使用，否则请求无法真正终止，易导致资源浪费和竞态问题。

html实现abortcontroller请求取消_html abortcontroller取消fetch请求【全面解析】

AbortController 是什么，什么时候必须用它 `AbortController` 不是浏览器的“高级功能”，而是现代 `fetch` 的基础配套机制。如果你在发请求后需要手动中止（比如用户切换页面、输入框快速连打、表单提交前取消上一次请求），又不想靠“设个 flag 然后 if 判断”这种不可靠方式，就必须用它。不用 `AbortController`，`fetch` 请求一旦发出就无法真正终止 —— 它会继续走完网络层，只是 JS 不再监听响应，造成资源浪费和潜在竞态问题。

怎么正确创建并传入 signal 给 fetch 关键不是“加了 signal 就能取消”，而是 signal 必须在 `fetch` 调用前已存在，且不能复用：

✅ 正确做法：

每次请求都新建一个 new AbortController()
把 controller.signal 作为 signal 字段传进 fetch 的第二个参数（init 对象）
保留对 controller 实例的引用，后续才能调用 abort()

❌ 常见错误：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

复用同一个 controller：调用一次 abort() 后，它的 signal 永久进入 aborted 状态，再传给新 fetch 会立刻抛出 AbortError
漏传 signal 或拼错字段名（比如写成 signals 或 Signal）
在 fetch().then() 里才创建 controller —— 这时请求早已发出，signal 失效

const controller = new AbortController();
fetch('/api/data', {
  signal: controller.signal // ✅ 必须这样传
}).catch(err => {
  if (err.name === 'AbortError') {
    console.log('请求被取消');
  }
});

// 取消时：
controller.abort(); // ✅

取消后 catch 到的错误类型和判断方式 `fetch` 被取消时不会进 `.then()`，而是直接进 `.catch()`，但错误对象不是通用的 `Error`，而是 `DOMException`，且 `name` 为 `"AbortError"`。

注意点：

err.name === 'AbortError' 是最可靠判断方式；不要依赖 err.message（不同浏览器内容不一致）
某些环境（如旧版 Safari）可能不抛 AbortError，而是静默失败，所以建议配合超时或状态标记做兜底
如果用了 async/await，需用 try/catch 捕获，且 catch 块里必须显式检查 err.name

try {
  const res = await fetch('/api/search', { signal });
  const data = await res.json();
} catch (err) {
  if (err.name === 'AbortError') {
    // ✅ 安全取消处理
  } else {
    // 其他网络或解析错误
  }
}