封装带重试逻辑的 fetch 函数需支持次数限制、指数退避、按错误类型选择性重试（如仅重试网络错误和5xx）、AbortController取消、自定义shouldRetry判断，并推荐用工厂函数预设baseURL与鉴权头，同时注意POST等非幂等请求重试风险及body不可复用问题。
封装一个带重试逻辑的 fetch 函数，核心是捕获网络失败、超时、非 2xx 响应等异常，并在满足条件时自动重试，同时避免无限重试和阻塞主线程。
基础重试函数：支持次数限制与间隔退避
最常用的方式是用 async/await + for 循环控制重试次数，每次失败后用 setTimeout（配合 Promise）延迟下一次请求：
- 默认最多重试 3 次（含首次），即总共发起 4 次请求
- 使用指数退避（如 100ms → 200ms → 400ms），避免服务雪崩
- 只对网络错误、5xx 错误重试；4xx（如 404、401）通常不重试
示例代码：
async function fetchWithRetry(url, options = {}, { maxRetries = 3, baseDelay = 100 } = {}) {
for (let i = 0; i <= maxRetries; i++) {
try {
const res = await fetch(url, options);
// 成功响应但状态码非 2xx，按需决定是否重试
if (!res.ok && res.status >= 500 && res.status < 600) {
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
}
return res;
} catch (err) {
if (i === maxRetries) throw err;
const delay = baseDelay * Math.pow(2, i); // 指数退避
await new Promise(resolve => setTimeout(resolve, delay));
}
}
}增强版：支持 AbortController 与自定义重试判断
真实项目中常需手动取消请求（如页面跳转、输入中断），或根据响应内容决定是否重试（比如特定错误码、JSON 中的 code: 'BUSY'）：
立即学习“Java免费学习笔记（深入）”；
- 接收可选的
signal（来自AbortController），透传给fetch - 提供
shouldRetry回调，接收error或response，返回true才重试 - 对 408、429、502、503、504 等临时性状态码默认重试
用法示意：
const controller = new AbortController();
setTimeout(() => controller.abort(), 8000);
<p>fetchWithRetry('/api/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ x: 1 }),
signal: controller.signal
}, {
maxRetries: 2,
shouldRetry: (err, res) => {
if (err?.name === 'AbortError') return false; // 取消不重试
if (res && [429, 503].includes(res.status)) return true;
if (err && /network|failed|timeout/i.test(err.message)) return true;
return false;
}
});封装成可复用的工厂函数（推荐用于多环境）
如果项目有不同 base URL、统一鉴权头、或需区分「强一致性接口」和「最终一致性接口」，建议用工厂模式预设配置：
- 返回一个绑定好
baseUrl、headers、retryConfig的函数 - 每个业务模块 import 自己的实例，避免重复传参
- 可内置日志上报（如重试次数、耗时、最终状态）
例如：
const createApiClient = (baseUrl, defaultOptions = {}) => {
return async function apiFetch(path, options = {}) {
const url = new URL(path, baseUrl);
const finalOptions = { ...defaultOptions, ...options };
return fetchWithRetry(url.toString(), finalOptions, {
maxRetries: 2,
baseDelay: 200
});
};
};
<p>// 使用
const userApi = createApiClient('<a href="https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39">https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39</a>', {
headers: { Authorization: <code>Bearer ${token}</code> }
});
userApi('/users/123').then(r => r.json());注意事项与避坑点
写重试逻辑容易忽略的关键细节：
- 不要重试 POST/PUT/DELETE 请求除非幂等：默认 GET 安全，但提交表单类请求重试可能造成重复下单。务必确认接口是否支持重试，或改用带唯一 ID 的幂等设计
-
body 是流（ReadableStream），不可复用：若需重试带 body 的请求，要确保
options.body是字符串、FormData 或可重复读取的结构（如用JSON.stringify预处理） -
避免重试超时请求本身：fetch 默认无 timeout，建议用
AbortController控制单次请求最大耗时，再由重试机制控制整体尝试窗口 - 服务端也要配合限流与降级：前端重试只是兜底，不能替代服务端的熔断、排队、缓存策略
