JavaScript 中实现网络请求自动重试需捕获错误、判断可重试性（如502/503/504）、控制次数与指数退避延时，仅对幂等请求重试，并配合UI防重复提交。
在 JavaScript 中实现网络请求失败时的自动重试，核心是捕获错误、判断是否可重试、控制重试次数与间隔，并避免无限重试或阻塞用户操作。下面分几个关键点说明如何实用、可控地实现它。
基础重试逻辑：用 async/await 封装 fetch
最常用的方式是封装一个带重试能力的 fetch 函数，支持传入最大重试次数和延迟时间：
- 每次失败后等待指定毫秒再发起下一次请求
- 只对网络错误（如断网）和特定 HTTP 状态码（如 502、503、504）重试，不对 401、404 等客户端错误重试
- 用 try/catch 捕获 fetch 抛出的异常（如网络中断），同时检查 response.ok 判断 HTTP 状态是否成功
控制重试次数与退避策略
简单固定延时（如每次等 1 秒）容易造成请求洪峰；更合理的是采用指数退避（exponential backoff）：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 第 1 次失败后等 1000ms，第 2 次等 2000ms，第 3 次等 4000ms……即 delay = base * 2^attempt
- 可加随机抖动（jitter），比如在计算出的延迟基础上 ±20%，防止多个请求同步重试
- 设置最大重试次数（如 3 次），超过后直接 reject 原始错误
避免副作用与重复提交
重试机制必须考虑业务安全性：
立即学习“Java免费学习笔记（深入）”；
- 只对幂等请求重试：GET、HEAD、OPTIONS 可安全重试；POST/PUT/DELETE 默认不重试，除非后端明确支持幂等（如带唯一 id 的订单创建）
- 如果必须重试非幂等请求，前端应生成并携带 Idempotency-Key 请求头，由服务端保证多次执行效果一致
- UI 层需禁用按钮或显示加载态，防止用户重复点击触发多条并发重试链
封装示例（简洁可用版）
以下是一个轻量、可复用的重试函数：
async function retryFetch(url, options = {}, { retries = 3, baseDelay = 1000 } = {}) {
for (let i = 0; i <= retries; i++) {
try {
const res = await fetch(url, options);
if (res.ok) return res;
// 对 5xx 错误重试，4xx 直接抛出
if (res.status >= 500 && res.status < 600 && i < retries) {
await new Promise(r => setTimeout(r, baseDelay * Math.pow(2, i)));
continue;
}
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
} catch (err) {
if (i === retries) throw err;
await new Promise(r => setTimeout(r, baseDelay * Math.pow(2, i)));
}
}
}
// 使用
retryFetch('/api/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error('最终失败:', err));
