Vue 请求封装如何实现接口返回异常时的降级备用数据读取

Vue请求封装中实现接口异常降级的核心是“请求失败不中断体验”，即在响应拦截器统一处理HTTP错误、网络异常、超时及业务错误，返回带isFallback:true标识的备用数据，并通过fallback参数、缓存、离线JSON等多级兜底，结合响应式计算与自定义Hook自动融合主备数据，同时保留日志与上报确保问题可追溯。

Vue 请求封装中实现接口异常时的降级备用数据读取，核心在于“请求失败不中断体验”，即当网络请求出错、超时、返回空或业务错误时，自动 fallback 到预设的本地数据、缓存数据或兜底结构，避免页面空白、报错白屏或跳 error 页面。

响应拦截器中统一判断并注入备用数据

在 Axios 响应拦截器里，对所有请求做统一兜底处理。不是简单 reject，而是根据错误类型决定是否提供替代数据：

1. HTTP 错误（如 404/500）、网络异常、超时 → 返回一个带 isFallback: true 标志的对象，并附上默认结构（如空数组、空对象）
2. 业务错误（如后端返回 code !== 200）→ 若该接口有明确的兜底场景（如商品列表加载失败展示“最近浏览”），可在此处直接返回缓存数据或静态 mock
3. 空响应（data === null 或 data.length === 0 且业务允许为空）→ 可保留原数据，也可替换为语义化空态对象（如 { list: [], hasMore: false, isEmpty: true }）

组件内按需启用降级逻辑

不要让每个组件都手动写 try-catch，而是在封装好的请求函数中暴露降级开关和备用源：

1. 导出的请求方法支持传入 fallback 参数，例如：get('/api/user', { fallback: { name: '游客', avatar: '/default.png' } })
2. 配合 localStorage 或内存缓存，优先读缓存再发请求；请求失败时直接返回缓存值（需加时间戳校验，避免 stale 数据）
3. 对关键列表页，可预置 JSON 文件作为离线兜底（如 fallback-products.json），通过 import.meta.env.DEV 控制仅开发环境启用

结合 computed 或组合式函数自动衔接

在业务组件中，用响应式方式把“主数据”和“备用数据”自然融合：

1. 定义 const safeData = computed(() => response.value ?? fallbackData)，响应式地桥接两者
2. 使用自定义 Hook（如 useApiWithFallback(url, options)），内部自动处理 loading / error / fallback 状态，并返回 { data, isLoading, isError, isFallback }
3. 模板中用 v-if="!isError || isFallback" 渲染主体内容，用 v-else 显示友好提示而非报错弹窗

避免全局静默吞错，保留可追溯性

降级不等于掩盖问题。要在不影响用户体验的前提下保留下文线索：

1. 所有 fallback 行为都打日志（如 console.warn('[FALLBACK] /api/order failed, using local cache')）
2. 生产环境将降级事件上报（如 Sentry 添加 tag fallback:true），便于统计高频失败接口
3. 给备用数据加标识字段（如 __source: 'fallback-cache'），方便埋点或调试时区分真实数据与兜底数据