在大厂做全链路故障注入演练（Chaos Engineering）时，最残酷的场景往往是模拟后端核心微服务集群突发宕机：数据库连接池被打爆，API 网关开始疯狂抛出 500 内部错误、502 坏网关以及 504 上游超时。
在这种极端时刻，未做容灾防御的前端页面会瞬间呈现出极其业余的崩溃态：商品列表空空如也、满屏弹出红色的“服务器开小差了，请重试”错误气泡，按钮被灰掉或者不断转圈。受到惊吓的用户会本能地疯狂下拉刷新或连续狂点，成百上千万客户端瞬间发起的“二次重试风暴”（Thundering Herd），会像补刀一样把刚刚尝试重启的服务端微服务彻底打入万劫不复的深渊。
合格的大促前端架构，必须具备“演员忘词时的即兴兜底能力”——哪怕后端服务已经彻底挂死，前端依靠本地持久化的静态快照与内嵌 Mock 规则，依然能优雅、丰满地把商品主会场展现出来，并温柔地接管用户心智。这种能力，就是前端柔性降级（Graceful Degradation）。
柔性降级的三级数据缓存漏斗
当物理网络请求返回 5xx 状态码时，降级引擎绝不能直接把 Promise.reject 抛给视图组件，而是应当顺着以下优先级梯队逐层探寻替代数据源：
前端智能熔断与柔性降级拦截器实现
除了数据兜底之外，降级系统必须内建客户端熔断器（Client-side Circuit Breaker）。当某个接口在 10 秒内连续出现 5 次 5xx 失败时，熔断器立即“跳闸”（Open State）。在接下来的 30 秒冷却期内，任何新发起的同类接口请求直接在客户端被拦截并秒级返回降级数据，严禁产生真实的物理网络 I/O，从而为后端服务赢得宝贵的重启缓冲期：
export interface FallbackConfig<T> {
endpoint: string;
defaultMockData: T;
cacheTtlMs: number;
}
export type CircuitState = 'CLOSED' | 'OPEN' | 'HALF_OPEN';
export class CircuitBreakerGracefulDegrader {
private failureCount: Map<string, number> = new Map();
private circuitState: Map<string, CircuitState> = new Map();
private nextAttemptTime: Map<string, number> = new Map();
private memoryCache: Map<string, { data: any; timestamp: number }> = new Map();
private failureThreshold: number = 5; // 连续失败 5 次触发熔断
private cooldownPeriodMs: number = 30000; // 熔断冷却期 30 秒
/**
* 包装受保护的网络请求
*/
public async executeWithFallback<T>(
endpoint: string,
requestFn: () => Promise<T>,
fallbackConfig: FallbackConfig<T>
): Promise<{ data: T; isDegraded: boolean; source: 'network' | 'cache' | 'mock' }> {
const currentState = this.getCircuitState(endpoint);
// 1. 如果熔断器处于开启状态，直接拒绝网络物理请求，返回降级数据
if (currentState === 'OPEN') {
console.warn(`[熔断器保护中] 接口 ${endpoint} 处于跳闸状态，直接执行柔性降级`);
const fallbackData = await this.resolveFallbackData(endpoint, fallbackConfig);
return { data: fallbackData.data, isDegraded: true, source: fallbackData.source };
}
try {
// 2. 尝试执行真实物理网络请求
const networkResult = await requestFn();
// 请求成功，重置失败计数器并恢复熔断器为闭合状态
this.failureCount.set(endpoint, 0);
this.circuitState.set(endpoint, 'CLOSED');
// 异步刷新内存与 IndexedDB 成功快照
this.saveSuccessCache(endpoint, networkResult);
return { data: networkResult, isDegraded: false, source: 'network' };
} catch (error: any) {
console.error(`[接口异常] ${endpoint} 请求失败，错误信息:`, error.message);
// 累加失败计数
const currentFailures = (this.failureCount.get(endpoint) || 0) + 1;
this.failureCount.set(endpoint, currentFailures);
if (currentFailures >= this.failureThreshold) {
// 触发熔断跳闸
this.circuitState.set(endpoint, 'OPEN');
this.nextAttemptTime.set(endpoint, Date.now() + this.cooldownPeriodMs);
console.error(`[熔断器触发] 接口 ${endpoint} 连续失败达 ${currentFailures} 次，开启 30s 冷却防护`);
}
// 执行降级兜底链路
const fallbackData = await this.resolveFallbackData(endpoint, fallbackConfig);
return { data: fallbackData.data, isDegraded: true, source: fallbackData.source };
}
}
private getCircuitState(endpoint: string): CircuitState {
const state = this.circuitState.get(endpoint) || 'CLOSED';
if (state === 'OPEN') {
const recoveryTime = this.nextAttemptTime.get(endpoint) || 0;
if (Date.now() > recoveryTime) {
// 冷却时间到，转为半开状态，允许下一次请求试探
this.circuitState.set(endpoint, 'HALF_OPEN');
return 'HALF_OPEN';
}
}
return state;
}
private async resolveFallbackData<T>(
endpoint: string,
config: FallbackConfig<T>
): Promise<{ data: T; source: 'cache' | 'mock' }> {
// 优先读取内存最新热缓存
const cached = this.memoryCache.get(endpoint);
if (cached && (Date.now() – cached.timestamp < config.cacheTtlMs)) {
return { data: cached.data as T, source: 'cache' };
}
// 内存未命中或已严重过期，返回打包期内嵌的兜底静态 Mock
return { data: config.defaultMockData, source: 'mock' };
}
private saveSuccessCache(endpoint: string, data: any): void {
this.memoryCache.set(endpoint, {
data,
timestamp: Date.now()
});
}
}
实战落地红线与边界控制
在落地柔性降级体系时，有三个致命的业务红线绝不可触碰：
容灾的最高境界是让用户“感受不到灾难的存在”。在最狼狈的服务器雪崩时刻，前端依然能体面、稳重地递上一张静态画布，这就是对系统稳定性最深沉的守护。
