useAsyncState

管理异步操作的状态（loading/data/error），简化异步数据处理。

函数签名

function useAsyncState<T>(
  promise: Promise<T> | (() => Promise<T>),
  initialState?: T,
  options?: AsyncStateOptions
): {
  state: Ref<T | undefined>
  isLoading: Ref<boolean>
  error: Ref<Error | null>
  execute: () => Promise<void>
}

interface AsyncStateOptions {
  immediate?: boolean        // 是否立即执行，默认 true
  onSuccess?: (data: T) => void
  onError?: (error: Error) => void
  resetOnExecute?: boolean   // 执行时是否重置状态，默认 true
}

参数

参数名	类型	必填	默认值	说明
promise	Promise<T> | () => Promise<T>	是	-	Promise 或返回 Promise 的函数
initialState	T	否	undefined	初始状态值
options.immediate	boolean	否	true	是否立即执行
options.onSuccess	function	否	-	成功回调
options.onError	function	否	-	错误回调
options.resetOnExecute	boolean	否	true	执行时是否重置状态

返回值

类型	说明
{ state, isLoading, error, execute }	异步状态对象

工作原理

1. 初始化：

   • 创建 state、isLoading、error 的响应式 ref
   • 如果 immediate 为 true，立即执行

2. execute()：

   • 设置 isLoading 为 true
   • 如果 resetOnExecute 为 true，清空 error
   • 执行 Promise：
     • 成功：更新 state，调用 onSuccess
     • 失败：更新 error，调用 onError
   • 设置 isLoading 为 false

3. 状态管理：

   • state: 异步数据
   • isLoading: 加载中标志
   • error: 错误信息

简化异步数据获取的模板代码，自动管理加载和错误状态。