Vue 3 异步请求统一封装核心是组合式函数 useRequest，固定返回 data/loading/error 三元组状态，接收异步函数而非 URL，内置错误分级处理、AbortController 清理及卸载防护。
Vue 3 中处理异步请求与错误捕获的统一封装，核心是用组合式函数（Composable）把“请求逻辑”“状态管理”和“错误处理”三者解耦并标准化，而不是在每个组件里重复写 try/catch、loading = true、error.value = … 这类样板代码。
统一状态结构：固定 data / loading / error 三元组
所有异步请求都应返回一致的状态结构，便于模板统一消费：
-
data：ref 包裹的响应数据，默认为
null或初始值（如空数组） -
loading：ref
，标识请求是否进行中 -
error：ref
，捕获并标准化错误信息
不建议直接暴露原始 Promise 或 throw 错误到模板层——这会让组件承担本该由组合函数处理的异常流控制。
封装 useRequest：接收函数而非 URL，提升灵活性
推荐以“传入异步函数”为设计入口，而非硬编码 URL 或请求库：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 支持任意请求方式：axios、fetch、自定义 SDK，甚至模拟数据函数
- 便于单元测试：可直接传入 mock 函数，无需 mock 全局 fetch
- 天然支持参数透传和类型推导（尤其配合 TypeScript）
示例关键逻辑：
const { data, loading, error, execute } = useRequest(() => api.getUser(id))错误捕获必须收口，且提供可配置策略
统一错误处理不是简单 catch(e) => error.value = e，而要覆盖常见场景：
- 网络失败、超时、4xx/5xx 响应 → 转为业务可读提示（如 “请求超时，请重试”）
- 响应体解析失败（如 JSON 解析异常）→ 捕获并标记为客户端错误
- 主动中断请求（如 AbortController）→ 不视为错误，清空 error 并保持 loading = false
- 支持错误分级：是否上报 Sentry、是否 toast 提示、是否静默忽略（如轮询失败）
避免在组件内再写 errorCaptured 处理这类请求错误——它属于跨组件通用逻辑，应在组合函数内部完成。
加载态与副作用清理需自动对齐生命周期
异步操作必须考虑组件卸载场景：
- 使用
onUnmounted清理未完成的请求（配合AbortController） - 执行
execute后若组件已卸载，不再更新data或error，防止警告 “Can't perform state update on unmounted component” - 默认不自动触发请求，由调用方决定时机（如
onMounted或事件回调），避免 setup 中隐式副作用
不依赖 async setup ——它会返回 Promise，破坏响应式上下文，且无法优雅处理错误边界。
