Vue 请求封装实现离线缓存优先的降级策略，即请求前先查本地缓存（localStorage/sessionStorage/IndexedDB），命中则直接返回；未命中再发网络请求并写入缓存；失败时 fallback 至旧缓存，保障离线可用性。
Vue 请求封装实现离线缓存优先的网络请求降级，关键不是替换 axios 或改写 fetch，而是把缓存逻辑“织入”请求流程——在发起网络请求前先查本地缓存（如 localStorage、sessionStorage 或 IndexedDB），命中则直接返回；未命中再走网络，并把成功响应写入缓存。整个过程对业务层透明，且能自动 fallback 到离线数据。
缓存层前置：请求前先查本地
在封装的 request 函数中，不直接发网络请求，而是先检查缓存。适合读多写少、时效性要求不高的接口（如商品列表、用户资料、配置项）。
- 用 key 拼接 URL + 序列化参数（如
`${url}-${JSON.stringify(params)}`），避免键冲突 - 缓存内容包含 data、timestamp、expires（毫秒过期时间），便于控制新鲜度
- 若缓存存在且未过期，直接 resolve 缓存数据，跳过网络请求
- 若缓存失效或不存在，继续走网络链路，但保留“兜底”能力
网络请求带 fallback：失败时返回旧缓存
网络请求可能因离线、超时或服务端错误而失败。此时不应抛错中断流程，而应回退到最近一次有效的缓存数据（即使略旧）。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
try/catch包裹 fetch 或 axios 调用，捕获网络异常 - 失败后检查本地是否有可用缓存（存在且非空即可，不强校验过期）
- 有则返回缓存数据，并标记 warning（如 console.warn('使用离线缓存')）
- 无则抛出明确错误（如
new Error('网络不可用，且无可用缓存')）
缓存写入与更新策略
网络请求成功后，需决定是否写入/更新缓存。不能无脑覆盖，否则可能把错误响应也缓存下来。
立即学习“前端免费学习笔记（深入）”；
- 只在 status === 200 且 data 字段有效时才写入缓存
- 写入时附带时间戳和预设有效期（例如 5 分钟），避免长期 stale
- 对敏感操作（如提交订单、修改密码），默认不缓存响应，或设极短有效期（10s）
- 支持手动清除某类缓存（如用户登出时清空 profile 相关 key）
与 Service Worker 协同，分层兜底
前端请求封装解决的是“业务数据”离线可用，Service Worker 解决的是“资源加载”离线可用。两者互补，不是替代。
- SW 负责缓存 HTML、JS、CSS、图片等静态资源，保证页面能打开
- 请求封装负责缓存 API 响应，保证打开后能展示真实业务内容
- 当 navigator.onLine 为 false 时，可跳过网络请求阶段，直接走缓存查 + fallback 流程
- 配合 Background Sync，在联网后自动重发待同步操作（如草稿提交）
