前端网络请求超时是前端主动设时间红线放弃等待，主流方案有三：Axios配timeout选项、Promise.race手动封装、AbortController搭配fetch；推荐Axios用timeout，fetch用AbortController。
前端网络请求超时，本质是“等太久就主动放弃”，不是靠后端返回，而是前端自己设个时间红线。主流做法有两种：用框架自带能力（如 Axios），或手动封装 Promise 超时逻辑。
用 Axios 直接配 timeout 选项
Axios 内置超时控制，最简单直接：
- 在请求配置中加 timeout: 5000（单位毫秒），表示 5 秒没响应就拒绝 Promise
- 超时会进 catch 块，错误对象的 code 是 'ECONNABORTED'，message 含 'timeout' 字样，可据此区分是超时还是其他网络错误
- 注意：timeout 只管请求发出去后的等待时间，不包括 DNS 查询、TCP 连接建立等底层耗时（这些由浏览器控制，Axios 无法干预）
用 Promise.race 手动封装超时
适用于原生 fetch、自定义请求函数，或需要统一超时策略的场景：
- 核心思路：把原始请求 Promise 和一个“定时 reject”的 Promise 放进 Promise.race()，谁先完成就用谁的结果
- 超时 Promise 写法：new Promise((_, reject) => setTimeout(() => reject(new Error('请求超时')), 5000))
- 封装成工具函数后，所有请求都能复用，比如：await withTimeout(fetch('/api/data'), 5000)
- 注意：fetch 本身不会因网络断开自动 reject，若需更严格控制（如断网立即失败），得配合 navigator.onLine 或 AbortController
用 AbortController 主动中断（推荐搭配 fetch）
这是现代标准方案，比单纯超时更灵活，支持中途取消：
立即学习“Java免费学习笔记（深入）”；
- 创建控制器：const controller = new AbortController()，获取信号：controller.signal
- 传给 fetch：fetch(url, { signal: controller.signal })
- 超时触发：setTimeout(() => controller.abort(), 5000)，此时 fetch Promise 立即 reject，错误类型为 AbortError
- 优势：真正中断底层请求（释放连接），不只停留在 JS 层拒绝；还能手动调用 controller.abort() 响应用户取消操作
实际组合建议
日常开发中，可以这样落地：
- 项目用 Axios → 优先设 timeout，再加拦截器统一处理超时错误（比如弹提示、上报监控）
- 项目用 fetch → 默认配 AbortController + setTimeout，封装成 fetchWithTimeout() 函数
- 对关键接口（如支付、提交表单），除了超时，还应在 UI 层加防重复点击、loading 锁定，避免用户误操作叠加请求
