组合式函数中应封装请求逻辑与错误管理,使用useAsyncState或自定义ref+try/catch统一处理加载、成功、失败三态,暴露error和reset方法,避免解构丢失响应性、重复请求及直接throw错误。

在组合式函数中处理错误与异常状态,核心是把“请求逻辑”和“错误管理”一起封装,而不是散落在组件里手动 try/catch 或反复判断 error.value。VueUse 的 useAsyncState 就是典型范例,但你也可以自己封装更贴合业务的逻辑。
用 useAsyncState 统一管理加载、成功、失败三态
它自动返回 state(数据)、isLoading(是否请求中)、isReady(是否完成且无错)、error(错误对象)四个响应式字段,无需手动设 loading = true / false。
- 传 Promise 或异步函数,不阻塞
setup - 初始值作为占位,避免模板渲染空状态时出错
-
error是shallowRef,可直接在模板中用v-if="error"判断
手动封装时显式暴露 error 和 reset 方法
如果你需要自定义重试、错误分类或埋点,可以基于 ref + try/catch 封装:
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
- 用
const error = ref存储错误,保持响应性(null) - 在异步操作后清空 error:
error.value = null - 提供
reset()方法,方便用户点击重试时一键恢复初始态 - 避免在组合式函数里直接
console.error,把错误抛给调用方决定如何展示或上报
配合 errorCaptured 或全局 errorHandler 做兜底
组合式函数内部捕获的错误(如网络超时、解析失败)应赋值给 error,但未被处理的异常(比如组件 render 阶段抛出、watch 回调里意外报错)仍需上层兜底:
- 在根组件或布局组件用
errorCaptured捕获子组件内组合式函数引发的错误 - 通过
app.config.errorHandler收集未被捕获的运行时异常,用于监控告警 - 注意:组合式函数本身不触发
errorCaptured,只有组件 render 或生命周期钩子中的错误才会触发
避免常见陷阱
写组合式函数时容易忽略的细节:
- 不要解构
error.value后再赋值——解构会丢失响应性,始终操作error.value - 异步函数若被多次调用(如搜索输入频繁触发),要防重复请求,可用
abortController或节流 - 错误对象默认不响应式,如果需深层监听(如
error?.response?.status),要用shallowRef包一层,别用reactive - 不要在组合式函数里直接
throw错误,这会中断执行;应转为error.value = new Error(...)
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!









