组合式函数处理异步请求需封装请求逻辑、状态响应与生命周期控制，用ref管理data/loading/error响应式状态，提供自动执行与手动execute方法，结合AbortController防竞态和资源泄漏，并支持watch、防抖、缓存、重试等扩展。
在组合式函数中处理异步请求与加载状态，关键是把「请求逻辑、状态响应、生命周期控制」三者封装成可复用、可扩展的函数，而不是在每个组件里重复写 loading/data/error 和 try-catch。
用 ref 统一管理响应式状态
核心状态必须是响应式的，才能驱动视图更新。通常用 ref 声明三个基础变量：
-
data：存储成功返回的数据，初始值一般为
null或undefined -
loading：布尔值，标识请求是否进行中，初始建议设为
false（避免自动触发时闪现 loading） -
error：保存错误信息，初始为
null，出错后赋值为字符串或 Error 实例
封装执行逻辑并控制调用时机
异步函数本身不应直接暴露给组件调用，而应包装进一个可控的执行方法中：
- 把实际请求抽成独立函数（如
() => api.getUsers()），避免闭包污染和参数耦合 - 默认在
onMounted中自动执行（适合页面初始化数据） - 同时返回
execute方法，支持手动触发（比如搜索框输入后调用、分页点击等） - 在
try/catch/finally中统一更新状态：成功赋值 data，失败赋值 error，最后重置 loading
防竞态与资源泄漏必须做
用户快速切换页面或连续操作时，旧请求可能晚于新请求返回，导致界面显示错乱或更新已销毁的组件。解决方式是主动中断：
- 使用 AbortController，创建
controller = new AbortController() - fetch 或 axios 请求时传入
{ signal: controller.signal } - 在
onUnmounted中调用controller.abort()，清理未完成请求 - 若需支持“新请求覆盖旧请求”（如搜索），可在每次 execute 前先
controller.abort()，再新建 controller
按需扩展：watch、缓存、重试都可叠加
组合式函数的优势在于层层增强，基础版跑通后，可以渐进添加能力：
- 依赖响应式参数（如关键词、页码）时，用
watch监听并触发execute()；更简洁可用watchEffect，但注意首次执行时机 - 搜索类场景加 防抖：用
lodash.debounce或原生setTimeout包裹 execute - 缓存相同参数的请求结果：用
Map存key → Promise，命中则直接 await 已有 Promise - 失败后自动重试：递归调用自身，加 delay 和最大次数限制，避免无限循环
