JavaScript 中 Fetch 怎么结合 AbortController 实现超时控制-js教程-PHP中文网

fetch 结合 abortcontroller 实现超时控制，核心是通过其 signal 传给 fetch 并用 settimeout 调用 abort()，使 fetch 立即拒绝并抛出 aborterror；需每次新建 controller、正确清理定时器、捕获 aborterror 并注意浏览器兼容性。

javascript 中 fetch 怎么结合 abortcontroller 实现超时控制

Fetch 结合 AbortController 实现超时控制，核心是通过 AbortController 的 signal 传给 fetch，再用 setTimeout 主动调用 abort()。关键在于信号一旦中止，fetch 会立即拒绝并抛出 AbortError，而不是等网络响应。

创建 AbortController 并传入 signal

每次请求前新建一个 AbortController 实例，把它的 signal 作为 fetch 的选项传入。这样 fetch 就能监听中止信号：

不要复用同一个 controller，否则多个请求会互相干扰
signal 是只读属性，不可修改，但可被多次监听（多个 fetch 可共用同一 signal，但一般不建议）
fetch 内部自动监听 signal 的 aborted 状态，无需手动判断

用 setTimeout 触发 abort

设定超时时间后，在定时器里调用 controller.abort()。注意：abort 后 signal 的 aborted 变为 true，fetch 会立刻 reject：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

超时时间应略大于预期响应时间，避免弱网下误触发
abort 不会取消已发出的 HTTP 请求（服务端仍可能处理），但会终止浏览器端的 Promise 和资源加载
务必在 fetch 外层 try/catch 或 .catch() 中捕获 DOMException: AbortError

完整示例代码

以下是一个带超时的封装函数：

function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const { signal } = controller;

  const timeoutId = setTimeout(() => controller.abort(), timeout);

  return fetch(url, { ...options, signal })
    .finally(() => clearTimeout(timeoutId))
    .catch(err => {
      if (err.name === 'AbortError') {
        throw new Error('Request timed out');
      }
      throw err;
    });
}

// 使用
fetchWithTimeout('/api/data', { method: 'POST' }, 3000)
  .then(res => res.json())
  .catch(err => console.error(err.message)); // "Request timed out"