离线缓存异步错误处理需区分网络不可达、缓存读取失败、缓存过期/损坏三类异常,并分别采用typeerror检测断网、独立try/catch防御json解析失败、版本校验与自定义错误分类上报等策略。

离线缓存场景下的异步错误处理,核心在于区分“网络不可达”“缓存读取失败”“缓存数据过期或损坏”三类异常,并为每种情况提供明确、可恢复的应对策略。不能只靠 try/catch 一把抓,否则容易把断网当成业务错误,或把 JSON 解析失败当成网络异常。
识别并分离断网异常(fetch 失败)
Fetch 在断网时会直接 reject 一个 TypeError(如 "Failed to fetch" 或 "NetworkError when attempting to fetch resource"),它不会进入 .then(),也不会返回 Response 对象。这是判断离线状态的第一信号:
- 必须用
instanceof TypeError+ 正则匹配错误消息关键词(/failed|network|fetch/i)双重确认,避免误判其他 TypeError - 不要仅依赖
response.status或!res.ok——这些只在请求发出且收到响应后才生效,断网时根本走不到这一步 - 示例中应主动抛出带语义的错误,比如
new Error('OFFLINE_NETWORK'),方便后续统一拦截或 UI 提示
安全读取缓存并防御解析失败
即使有缓存,localStorage.getItem() 返回的是字符串,JSON.parse() 仍可能抛 SyntaxError(如缓存被手动篡改、存储时截断、或旧版本数据结构变更)。这类错误和网络无关,需单独捕获:
- 对缓存读取和解析做独立 try/catch,不与 fetch 混在同一块里
- 捕获
SyntaxError后可清除损坏缓存,并降级到空数据或默认值,而不是让用户看到“解析失败”报错 - 建议给缓存加简单版本标识(如
{"v": "1.2", "data": {...}}),解析前先校验结构,提前规避类型错乱
组合策略:网络优先 + 缓存兜底 + 错误分类上报
真实离线流程不是“先 fetch 再 fallback”,而是要并行或分层决策。推荐采用“带信号的 fetch + 缓存检查 + 类型化错误抛出”的组合:
- 用
AbortController设置合理超时(如 8s),既防卡死,也避免用户长时间等待;超时 reject 可归为“临时不可用”,区别于确定性断网 - fetch 失败后立即尝试读缓存;若缓存也失败(空、损坏、过期),再返回默认态或提示“暂无可用数据”
- 所有错误都包装成自定义错误实例(如
class OfflineError extends Error),附带type: 'NETWORK'|'CACHE_PARSE'|'CACHE_STALE'字段,便于监控系统分类统计 - 全局监听
unhandledrejection仅作兜底,不用于业务逻辑——它无法区分是哪个 fetch 调用出的问题,也不该在此重试或修改 UI
避免常见陷阱
很多离线方案崩溃,不是因为没缓存,而是错误处理逻辑本身出错:
- 不要在
finally里执行异步操作(如清 loading 状态用setTimeout),它可能在错误未被捕获前就执行,掩盖真实问题 - 避免在
catch中直接throw err后不做任何处理——至少记录err.stack和当前 URL、时间戳,否则离线复现极难 - Promise.all 并行请求时,单个失败不应导致整体失败;可用
Promise.allSettled或提前包装每个请求的 catch,保证缓存加载不被一个接口拖垮
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











