Fetch 请求超时设置方法详解

本文深入解析了如何在 JavaScript 中为 Fetch 请求实现可靠的超时控制——尽管原生 Fetch 不支持直接设置超时，但通过巧妙结合 AbortController 主动中断机制与 Promise.race 竞态逻辑，可精准捕获并终止长时间无响应的请求，有效防止页面卡顿或资源阻塞；文章不仅提供即用型封装函数，还覆盖浏览器兼容性处理、错误类型精细化区分（如 AbortError 与网络/状态码错误）、以及面向生产环境的增强实践（如响应校验、自动 JSON 解析和可配置重试），帮助开发者构建更健壮、可维护的前端请求层。

Fetch 本身不支持直接设置超时时间，但可以通过 AbortController 配合 Promise.race 实现可控的请求超时机制，避免请求无限挂起。

使用 AbortController 主动中断请求

AbortController 是浏览器原生提供的用于中止 fetch 请求的接口。它生成一个可被终止的 signal，在超时触发时调用 abort()，使 fetch 抛出 AbortError 异常。

关键点：

• 创建 const controller = new AbortController()
• 将 controller.signal 传入 fetch 的 signal 选项
• 在定时器到期后执行 controller.abort()

用 Promise.race 包裹 fetch 和超时 Promise

把 fetch 请求和一个延迟 reject 的 Promise 放进 Promise.race，谁先完成就取谁的结果——超时快就走 reject 分支，请求快就走 resolve 分支。

示例代码：

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

  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      controller.abort();
      reject(new Error('Request timed out'));
    }, timeout);
  });

  return Promise.race([
    fetch(url, { ...options, signal }),
    timeoutPromise
  ]);
}

// 使用
fetchWithTimeout('/api/data', { method: 'GET' }, 3000)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Failed:', err.message));

注意兼容性和错误处理细节

部分旧版浏览器（如 IE）不支持 AbortController，需考虑降级或 polyfill；实际使用中还需区分错误类型：

• err.name === 'AbortError' 表示是超时主动中断
• 网络失败、4xx/5xx 状态码需在 fetch 成功后手动检查 response.ok
• 建议统一封装错误分类逻辑，便于上层判断重试或提示

更健壮的封装建议（含重试与状态检查）

生产环境推荐进一步增强：加入响应状态校验、自动 JSON 解析、可选重试等。例如：

• 在 fetch 成功后增加 if (!res.ok) throw new Error(`HTTP ${res.status}`)
• 对特定错误（如网络断开、超时）做有限次数重试
• 将超时时间设为可配置项，并根据接口重要性差异化设置（如查询 5s，提交 10s）

好了，本文到此结束，带大家了解了《Fetch 请求超时设置方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！