生产环境需健壮HTTP客户端，支持超时、重试（仅5xx/网络错误）、可取消（AbortSignal.any）、错误分类处理及响应标准化；示例封装含指数退避与Promise风格。
在生产环境中，直接用原生 fetch 很容易因网络抖动、服务临时不可用或响应过慢导致请求失败，影响用户体验和数据一致性。一个健壮的 HTTP 客户端必须支持重试（避免瞬时故障）、超时（防止卡死）、错误分类处理（如 4xx 不重试、5xx 可重试），以及可取消（配合 React 组件卸载等场景）。
基础封装：带超时和简易重试的 fetch 函数
核心思路是用 AbortController 控制超时与取消，用递归或循环实现重试逻辑，并对状态码做合理判断：
- 超时通过
AbortController.timeout()（现代浏览器）或手动setTimeout+abort()实现 - 重试只针对网络错误（
TypeError）和 5xx 响应，跳过 4xx（客户端问题不重试） - 设置最大重试次数（如 3 次）和指数退避（如 200ms → 400ms → 800ms）降低服务压力
支持 AbortSignal 的可取消请求
实际项目中常需在组件卸载、表单切换时中止请求，避免内存泄漏或状态错乱。封装函数应接受外部传入的 signal，并将其与超时 signal 合并：
- 用
AbortSignal.any([signal, timeoutSignal])实现“任一触发即中止” - 调用方可传入
useEffect中创建的AbortController.signal - 捕获
AbortError并静默处理（不抛出异常）
响应体解析与错误标准化
原生 fetch 成功返回 Response 对象，但业务层需要结构化数据。封装需统一处理：
立即学习“Java免费学习笔记（深入）”；
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 自动调用
response.json()或response.text()，失败时转为明确错误 - 对非 2xx 状态码抛出自定义错误（如
HttpError），附带status、statusText和响应体 - 区分网络错误（
TypeError）、取消错误（AbortError）、HTTP 错误（自定义HttpError），便于上层分类处理
完整示例（TypeScript + Promise 风格）
以下是一个轻量、无依赖的生产就绪封装（兼容主流浏览器，含注释关键点）：
async function fetchWithRetry(
input: RequestInfo | URL,
init: RequestInit & { signal?: AbortSignal } = {},
{
maxRetries = 3,
baseDelayMs = 200,
timeoutMs = 10_000
}: { maxRetries?: number; baseDelayMs?: number; timeoutMs?: number } = {}
): Promise<Response> {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
<p>// 合并外部 signal（如有）和超时 signal
const signal = init.signal
? AbortSignal.any([init.signal, controller.signal])
: controller.signal;</p><p>const options: RequestInit = { ...init, signal };</p><p>let lastError: unknown;</p><p>for (let attempt = 0; attempt <= maxRetries; attempt++) {
try {
const response = await fetch(input, options);</p><pre class="brush:php;toolbar:false;"> // 5xx 且未达最大重试次数，等待后重试
if (response.status >= 500 && response.status < 600 && attempt < maxRetries) {
await new Promise(r => setTimeout(r, baseDelayMs * Math.pow(2, attempt)));
continue;
}
clearTimeout(timeoutId);
return response;
} catch (err) {
lastError = err;
// 只对网络错误和未取消状态重试
if (
err instanceof TypeError &&
!(err instanceof DOMException && err.name === 'AbortError') &&
attempt < maxRetries
) {
await new Promise(r => setTimeout(r, baseDelayMs * Math.pow(2, attempt)));
} else {
break;
}
}}
clearTimeout(timeoutId); throw lastError; }
// 使用示例： // fetchWithRetry('/api/data', { method: 'POST', body: JSON.stringify(...) }) // .then(res => res.json()) // .catch(err => { // if (err.name === 'AbortError') console.log('请求被取消'); // else if (err instanceof TypeError) console.log('网络错误'); // else if ('status' in err) console.log('HTTP 错误:', err.status); // });
