如何用 Fetch 配合超时机制防止网络请求长时间处于挂起

一分耕耘，一分收获！既然打开了这篇文章《如何用 Fetch 配合超时机制防止网络请求长时间处于挂起》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

Fetch 本身不支持直接设置超时时间，但可通过 AbortController 配合 Promise.race 实现可控超时机制：创建 controller 并传入 signal，超时调用 abort() 触发 AbortError，再用 Promise.race 竞态 fetch 与定时 reject 的 Promise。

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学习网公众号了解相关技术文章。