JavaScript 中 Fetch 怎么实现请求超时自动中断-js教程-PHP中文网

fetch 本身不支持直接设置超时时间，但可通过 abortcontroller 配合 settimeout 实现请求超时自动中断；需为每次请求创建独立 controller，finally 中 cleartimeout 防泄漏，并注意老浏览器兼容性。

javascript 中 fetch 怎么实现请求超时自动中断

Fetch 本身不支持直接设置超时时间，但可以通过 AbortController 配合 setTimeout 实现请求超时自动中断。

使用 AbortController 主动中止请求

AbortController 提供了一个 signal 对象，可传入 fetch 的 options 中。调用其 abort() 方法后，正在执行的 fetch 请求会立即 reject，并抛出 AbortError。

创建 AbortController 实例，获取 signal
在 fetch 的 init 配置中传入 { signal }
用 setTimeout 在指定毫秒后调用 controller.abort()
捕获错误时检查 error.name === 'AbortError' 来区分超时和其他错误

封装一个带超时的 fetch 函数

把超时逻辑抽成可复用函数，避免每次手动写 setTimeout 和 abort：

function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

  return fetch(url, {
    ...options,
    signal: controller.signal
  }).finally(() => clearTimeout(id));
}

调用示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

fetchWithTimeout('/api/data', { method: 'GET' }, 3000)
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求超时');
    } else {
      console.log('其他错误:', err);
    }
  });

注意点和常见问题

实际使用中容易忽略几个关键细节：

每个 fetch 请求必须创建独立的 AbortController，不能复用 signal
务必在 finally 中 clearTimeout，防止内存泄漏或误触发 abort
服务端已返回但前端处理慢（如解析大 JSON）不算超时，AbortController 只中断网络阶段
部分老浏览器（如 IE）不支持 AbortController，需引入 polyfill 或改用 axios 等库

替代方案：用 Promise.race 简单包装（不推荐用于生产）

仅适用于简单场景，无法真正取消网络请求，只是提前拒绝 Promise：

function timeoutFetch(url, timeout = 5000) {
  const abort = new AbortController();
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => {
      abort.abort();
      reject(new Error('Request timed out'));
    }, timeout)
  );
  const fetchPromise = fetch(url, { signal: abort.signal });
  return Promise.race([fetchPromise, timeoutPromise]);
}

这种方式不如 AbortController + clearTimeout 稳定，且 timeout 错误和 abort 错误混在一起，不便于区分。