vue 3 中通过组合式函数封装接口兜底逻辑，实现错误响应与默认数据的复用：按网络中断、404、403、结构异常等分类 fallback；集成 businesserror 语义化处理业务失败；局部容错与全局 errorhandler 分工协作。
Vue 3 中统一错误处理与组合式函数结合处理接口兜底数据，关键在于把「错误响应逻辑」和「默认数据 fallback 行为」从组件中抽离，由组合式函数封装并复用。不是每个 useRequest 都手动写 try/catch 和默认值，而是让组合式函数自带容错能力。
兜底数据要解决的实际问题
接口失败时页面不能空白、不能报错白屏、不能卡在 loading；用户需要看到“有信息的失败状态”，比如：历史缓存数据、静态提示文案、空态占位结构。这些不是异常处理的附属品，而是体验闭环的一部分。
- 网络中断或超时 → 显示上一次成功数据 + “刷新重试”按钮
- 404 或业务错误（如字典未配置）→ 渲染默认 label：“暂无数据”或“未知类型”
- 权限拒绝（403）→ 隐藏敏感字段，只展示基础字段或提示语
- 后端返回结构异常（缺字段、类型错）→ 不崩溃，用
??或默认值兜住渲染
在 useRequest 中集成兜底策略
组合式函数是承载兜底逻辑最自然的位置。它知道请求何时发起、何时失败、失败原因是什么，也持有响应数据的 ref，天然适合插入 fallback 流程。
- 接收可选参数
fallback：可以是静态值、函数（支持访问上次 data）、或 Promise（触发缓存读取） - 在
.catch()后不直接 reject，而是先尝试恢复：若存在lastSuccessData就赋值给 result，同时标记isStale: true - 暴露
retryWithFallback方法，允许用户点击后优先用兜底数据渲染，再发新请求 - 对 4xx/5xx 做分类判断，不同错误码走不同 fallback 路径（例如 401 跳登录，404 返回空数组，500 返回上次数据）
配合 BusinessError 实现语义化兜底
单纯靠 HTTP 状态码不够精准。比如后端返回 { code: 200, success: false, msg: "库存不足" }，HTTP 层没报错，但业务已失败。这时需靠统一的业务错误类驱动兜底行为。
- 在请求拦截器或响应处理器中，把非 200 或
success === false的响应包装成BusinessError并抛出 -
useRequest捕获该错误后，根据err.code决定兜底内容：err.code === 'STOCK_EMPTY'→ 显示“库存为零”提示 + 禁用下单按钮 - 兜底数据本身也可带语义：返回
{ list: [], isEmpty: true, reason: 'STOCK_EMPTY' }，模板中用v-if="data.isEmpty && data.reason === 'STOCK_EMPTY'"精准控制 UI
与全局 errorHandler 协同工作
组合式函数内的兜底是“局部容错”，而 app.config.errorHandler 是“兜底的兜底”。两者分工明确：
-
useRequest处理可预期的接口失败，提供数据级 fallback，不触发全局 error - 当
useRequest内部意外抛出未捕获异常（如解析 JSON 失败、map 字段时 this.xxx 为 undefined），才落到errorHandler -
errorHandler可记录这类“非业务错误”，并通知监控系统；但不干预useRequest已管理好的数据流
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
