0Pricing
JavaScript Academy · 课时

使用 AbortController 中止请求

干净地取消正在进行的请求。

使用 AbortController 中止请求 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

为什么要取消请求

有时您启动的请求已经不再需要：用户离开了当前页面、输入了新的搜索内容，或 timeout 已到期。AbortController 允许您取消正在进行的请求。

创建 controller

创建一个 AbortController。它会提供一个可传给请求的 signal，以及一个用于取消请求的 abort() 方法。

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

传递信号

通过选项对象将 controller 的信号传给请求。现在可以取消该请求了。

fetch(url, { signal: controller.signal });

调用 abort

调用 controller.abort() 来取消请求。待处理的请求承诺对象会以 AbortError 拒绝。

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

捕获 AbortError

在 catch 中检查 err.name === "AbortError"，以区分主动取消和真正的故障。

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

timeout 模式

结合使用 setTimeout，即可自动取消响应缓慢的请求。如果请求先完成，请清除计时器。

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

内置的 timeout 辅助函数

现代环境提供了 AbortSignal.timeout(ms)，它会返回一个能够自动取消的信号。与自行连接 setTimeout 相比，这种方式更加简洁。

fetch(url, { signal: AbortSignal.timeout(5000) });

取消之前的搜索

对于输入即搜的搜索功能，请在开始新请求前取消之前的请求。这样可以防止过时的响应覆盖最新结果。

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

一个信号，多个请求

一个信号可以同时取消多个请求。将同一个信号传给多个请求，调用一次 abort() 就能取消它们。

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

已经取消的信号

如果将信号传给请求时它已经被取消，请求会立即拒绝。如果需要了解其状态，请检查 signal.aborted。

if (controller.signal.aborted) console.log("already cancelled");

组件卸载时进行清理

在基于组件的用户界面中，请在组件销毁时取消未完成的请求，以免尝试为已不存在的对象设置状态。

const controller = new AbortController();
// on teardown:
controller.abort();

快速检查

取消请求。

回顾

创建一个 AbortController，将它的 signal 传给请求，然后调用 abort() 进行取消。承诺对象会以 AbortError 拒绝，您可以通过名称检测它。您可以将其用于超时（AbortSignal.timeout）、取消之前的搜索、取消多个请求，以及在销毁时进行清理。

常见问题解答

「使用 AbortController 中止请求」课时是免费的吗？

是的 — 「使用 AbortController 中止请求」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「使用 AbortController 中止请求」这节课中我会学到什么？

干净地取消正在进行的请求。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「使用 AbortController 中止请求」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 发起 GET 请求
  2. POST 与发送数据
  3. 处理错误和状态码
  4. 使用 AbortController 中止请求
← 返回 JavaScript Academy