前端接口请求超时重试需区分超时、离线、服务端错误三类：超时（AbortError/ontimeout）可重试，离线（navigator.onLine===false/TypeError）不发包，5xx网关错误可重试而4xx/500不可；用AbortController实现fetch超时与取消，重试≤2次并指数退避+抖动，UI同步禁用按钮与重试提示。

前端实现接口请求的网络超时自动重试，关键不是“多试几次”，而是分清超时、离线、服务端错误三类情况，再按类型决定是否重试、重试几次、间隔多久。

明确区分超时与网络中断

超时（如 fetch 被 AbortController 中止、XMLHttpRequest 触发 ontimeout）说明请求已发出但没收到响应；而网络中断（如 navigator.onLine 为 false、fetch 抛 TypeError）是链路根本断开。这两者必须分开处理：

• 超时可重试，尤其是配合服务端返回 502/503/504 时，大概率是临时抖动
• 网络中断不重试——前端检测到离线就应直接拦截请求，不发包、不等待、不触发重试逻辑
• 务必同时监听 ontimeout 和 onerror（XHR）或 catch 中判断 err.name === 'AbortError' 与 TypeError（fetch），二者互补，不可只盯一个

用 AbortController 实现 fetch 超时+可取消

fetch 本身无 timeout 参数，但 AbortController 是现代标准做法，能真正中止连接、释放资源：

• 创建控制器：const controller = new AbortController()
• 发起请求时传 signal：fetch(url, { signal: controller.signal })
• 设超时中断：setTimeout(() => controller.abort(), 5000)
• 捕获后识别超时：catch(err) { if (err.name === 'AbortError') { /* 处理超时 */ } }

它还支持主动 abort（比如页面跳转、表单取消），避免无效请求堆积。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

立即学习“Java免费学习笔记（深入）”；

只对可重试错误重试，且控制节奏

盲目重试会加重服务压力，甚至引发重复提交（如非幂等 POST）：

• ✅ 可重试：超时（AbortError / ontimeout）、502 / 503 / 504 等网关类错误
• ❌ 不重试：4xx（400/401/403/404）、500（多数为永久性错误）、离线状态
• 重试次数建议 ≤ 2 次，首次延 1s，第二次延 2s（指数退避基础版），上限不超过 10s
• 避免“重试风暴”：加入随机抖动（如 ±200ms），让多个请求错开重试时间点

UI 层同步反馈，用户感知清晰

技术逻辑再严谨，用户看不到也等于白做：

• 点击按钮立即禁用 + 显示“加载中…”文字，防止重复点击
• 超时后恢复按钮为“重试”，而非持续禁用；用户点击前再次校验网络状态
• 非关键请求（如推荐位、埋点）可用更短超时（2–3 秒），失败即静默丢弃，不打扰主流程