实现请求失败降级处理的核心做法是在 fetch 调用链中捕获异常，并在 catch 块中根据错误类型执行备用逻辑。具体而言，需要检查 response.ok 属性以区分网络故障与 http 状态码错误（如 404 或 500），随后在 catch 中返回默认数据、重试请求或触发 ui 降级提示。若未正确处理非 2xx 状态码，程序会直接抛出 typeerror 导致降级逻辑失效。
如何区分网络错误与服务器错误并分别处理？
区分这两类错误的办法是判断 response.ok 的值。当网络完全中断时，fetch 会直接抛出异常进入 catch；而当服务器返回 4xx 或 5xx 状态码时，fetch 不会抛出异常，而是返回一个 Response 对象，此时必须显式检查 response.ok 是否为 false，若是则手动抛出错误以便进入统一的降级处理流程。
async function fetchWithFallback(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.warn('Request failed, using fallback:', error.message);
return { source: 'fallback', data: null };
}
}
上述代码中，若 fetch 成功但状态码为 500，response.ok 为 false，代码会抛出错误并进入 catch 块，最终返回包含 source: 'fallback' 的对象。若网络断开，同样进入 catch 块返回降级数据。
如何在降级处理中实现自动重试机制？
在降级处理中实现自动重试的办法是在 catch 块中递归调用原函数或设置延迟后重新发起请求。需要设置最大重试次数以防止无限循环，并在每次重试前添加短暂延迟以避免对服务器造成压力。重试成功后返回正常数据，超过最大次数后返回最终的降级数据。
async function fetchWithRetry(url, retries = 3) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
if (retries > 0) {
console.log(`Retrying... (${retries} attempts left)`);
await new Promise(resolve => setTimeout(resolve, 1000));
return fetchWithRetry(url, retries - 1);
}
console.warn('Max retries reached, using fallback');
return { source: 'fallback', data: null };
}
}
该函数在遇到错误时会尝试最多 3 次重试，每次重试间隔 1 秒。若所有重试均失败，则返回降级数据对象。这种模式适用于对实时性要求不高且允许短暂等待的场景。
基于程序中某个输入、条件或结果的具体问题
当 fetch 请求的 URL 指向一个不存在的端点（如 /api/nonexistent）且服务器配置为返回 404 状态码时，程序的行为是：首先 fetch 成功返回 Response 对象，但因 response.ok 为 false 而抛出错误，随后进入 catch 块。在 fetchWithFallback 示例中，这将直接返回 { source: 'fallback', data: null }；而在 fetchWithRetry 示例中，它将先记录日志并重试，直到重试次数耗尽后才返回相同的降级对象。这验证了区分 HTTP 错误与网络错误的重要性，以及重试机制对用户体验的影响。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
