Vue 3 Composition API 处理异步请求需统一管理 loading、data、error 状态，用 ref 响应式存储，onMounted 触发请求，结构化 try/catch/finally 处理，并封装为可复用、带类型推导的 useApi 组合函数。
Vue 3 的 Composition API 处理异步请求，核心是把“请求逻辑”和“状态管理”统一组织，避免分散在 data、methods、watch 等不同区块中。关键不在于写 async 函数本身，而在于如何让 loading、data、error 这些状态自然响应、可复用、不泄漏。
用 ref 管理响应式状态
异步结果必须存入 ref 或 reactive 才能触发视图更新。推荐用 ref 存基础类型（如 loading、error）和数组/对象（如 data），语义清晰且解构安全。
- loading = ref(false)：控制按钮禁用、骨架屏或 loading 图标显隐
- data = ref([]) 或 ref(null)：初始值要与后续赋值类型一致，利于 TypeScript 推导
- error = ref('')：字符串更易在模板中 v-if/v-text 使用；也可用 ref
做类型约束
在 onMounted 中触发请求
确保组件已挂载再发请求，防止 DOM 操作报错或响应式更新失效。onMounted 是最常用、最稳妥的入口点。
- 直接传入异步函数：onMounted(() => fetchData())
- 或封装后调用：onMounted(fetchData)，fetchData 内部含 try/catch 和状态赋值
- 若需首次加载 + 下拉刷新，可额外暴露 fetchData 方法供事件调用
结构化错误处理与 finally 清理
不要只 catch 错误就 console.error 了事。真实项目需要用户可见反馈（如 ElMessage、Toast）和状态归位。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- try 中执行请求并赋值 data.value
- catch 中设置 error.value，并可调用全局提示（如 message.error(err.message)）
- finally 中统一设 loading.value = false —— 即使出错也要关闭加载态，避免界面卡死
封装成可复用的组合函数（useApi）
当多个组件都要发类似请求（如 /users、/orders），重复写 loading/data/error 就违背 Composition API 的初衷。抽成 useApi(url) 更干净：
- 内部用 ref 创建标准三状态：data、loading、error
- 返回 { data, loading, error, execute }，execute 可接受参数（如 id）、支持重试
- 配合 abortController 实现组件卸载时自动取消请求，防内存泄漏
- 类型上可泛型化：useApi
('/users')，data 类型自动推导
不复杂但容易忽略
