JavaScript异步错误重试机制常用递归或循环实现，核心是捕获失败、判断重试条件、延迟执行；需控制次数、采用指数退避、区分可重试错误，并避免雪崩与栈溢出。
异步错误重试机制在 JavaScript 中常用递归或循环实现，核心是捕获失败请求、判断是否重试、延迟后重新执行。关键在于控制重试次数、退避策略（如指数退避）和终止条件，避免无限重试或雪崩。
用递归实现带次数限制的重试
递归写法简洁直观，适合封装成通用函数。每次失败时检查剩余重试次数，满足条件则延迟后调用自身：
async function fetchWithRetry(url, options = {}, maxRetries = 3, retryCount = 0) {
try {
const response = await fetch(url, options);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return await response.json();
} catch (err) {
if (retryCount >= maxRetries) throw err;
<pre class="brush:php;toolbar:false;">// 指数退避：100ms, 200ms, 400ms...
const delay = Math.pow(2, retryCount) * 100;
await new Promise(resolve => setTimeout(resolve, delay));
return fetchWithRetry(url, options, maxRetries, retryCount + 1);} }
注意：递归深度受 maxRetries 限制（一般 ≤ 5），避免栈溢出；延迟时间随重试次数增长，降低服务压力。
用 while 循环 + async/await 实现重试
循环方式更易控制流程，适合需要动态调整参数或记录日志的场景：
立即学习“Java免费学习笔记（深入）”；
async function fetchWithLoop(url, options = {}, maxRetries = 3) {
let lastError;
let retryCount = 0;
<p>while (retryCount <= maxRetries) {
try {
const response = await fetch(url, options);
if (!response.ok) throw new Error(<code>HTTP ${response.status}</code>);
return await response.json();
} catch (err) {
lastError = err;
retryCount++;</p><pre class="brush:php;toolbar:false;"> if (retryCount <= maxRetries) {
const delay = Math.pow(2, retryCount - 1) * 100;
await new Promise(resolve => setTimeout(resolve, delay));
}
}}
throw lastError; }
优势是逻辑集中、便于插入调试日志或监控上报；缺点是代码略长，需手动维护 retryCount 和终止判断。
封装成可复用的重试工具函数
把重试逻辑抽离为高阶函数，支持任意异步操作：
function withRetry(asyncFn, options = {}) {
const { maxRetries = 3, baseDelay = 100, jitter = true } = options;
<p>return async function(...args) {
let lastError;
for (let i = 0; i <= maxRetries; i++) {
try {
return await asyncFn(...args);
} catch (err) {
lastError = err;
if (i < maxRetries) {
let delay = baseDelay <em> Math.pow(2, i);
if (jitter) delay </em>= 0.5 + Math.random() * 0.5; // 加入随机抖动
await new Promise(resolve => setTimeout(resolve, Math.round(delay)));
}
}
}
throw lastError;
};
}</p><p>// 使用示例
const safeFetch = withRetry(fetch, { maxRetries: 2, baseDelay: 200 });
const data = await safeFetch('/api/data').then(r => r.json());这种封装解耦了业务逻辑与重试策略，方便统一配置（如全局开关、监控埋点）和测试。
注意事项与最佳实践
实际使用中需规避常见陷阱：
- 区分可重试与不可重试错误：如 401（未授权）、400（客户端错误）通常不应重试；502/503/网络中断才适合重试
- 设置合理的最大重试次数和总超时：例如最多 3 次 + 总耗时不超过 3 秒，防止阻塞用户操作
- 避免在无 await 的循环中发起并发请求：否则会变成“重试风暴”，应确保串行执行
- 前端慎用重试上传大文件等耗资源操作：建议配合进度提示和手动重试按钮
