feat(useAsyncState): add isomorphic destructure using `makeDestructur…

…able` utility and some tests for it
vueuse · Arkeviz · Jun 7, 2025 · Jun 7, 2025 · Jun 8, 2025 · Jun 8, 2025
commit 05ce3c88513b20b0572a392e90237fa1e22baf2a
diff --git a/packages/core/useAsyncState/index.test.ts b/packages/core/useAsyncState/index.test.ts
@@ -8,7 +8,7 @@ describe('useAsyncState', () => {
   })
 
   const p1 = (num = 1) => {
-    return new Promise((resolve) => {
+    return new Promise<number>((resolve) => {
       setTimeout(() => {
         resolve(num)
       }, 50)
@@ -83,4 +83,20 @@ describe('useAsyncState', () => {
     const { execute } = useAsyncState(p2, '0', { throwError: true, immediate: false })
     await expect(execute()).rejects.toThrowError('error')
   })
+
+  describe('useAsyncState with array destructing', () => {
+    it('should work', async () => {
+      const [state, execute] = useAsyncState(p1, 0, { immediate: false })
+      expect(state.value).toBe(0)
+      await execute(0, 2)
+      expect(state.value).toBe(2)
+    })
+
+    it('should work with error', async () => {
+      const [_state, execute, _isLoading, _isReady, error] = useAsyncState(p2, '0', { immediate: false })
+      expect(error.value).toBeUndefined()
+      await execute()
+      expect(error.value).toBeInstanceOf(Error)
+    })
+  })
 })
diff --git a/packages/core/useAsyncState/index.ts b/packages/core/useAsyncState/index.ts
@@ -1,18 +1,32 @@
 import type { Ref, ShallowRef, UnwrapRef } from 'vue'
-import { noop, promiseTimeout, until } from '@vueuse/shared'
+import { makeDestructurable, noop, promiseTimeout, until } from '@vueuse/shared'
 import { ref as deepRef, shallowRef } from 'vue'
 
-export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow extends boolean> {
+export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow extends boolean> extends Record<string, unknown> {
   state: Shallow extends true ? Ref<Data> : Ref<UnwrapRef<Data>>
   isReady: Ref<boolean>
   isLoading: Ref<boolean>
   error: Ref<unknown>
   execute: (delay?: number, ...args: Params) => Promise<Data>
 }
 
+type UseAsyncStatePromiseLike<Data, Params extends any[], Shallow extends boolean> = PromiseLike<UseAsyncStateReturn<Data, Params, Shallow>>
+
+export type UseAsyncStateReturnArray<Data, Params extends any[], Shallow extends boolean> = [
+  state: UseAsyncStateReturnBase<Data, Params, Shallow>['state'],
+  execute: UseAsyncStateReturnBase<Data, Params, Shallow>['execute'],
+  isLoading: UseAsyncStateReturnBase<Data, Params, Shallow>['isLoading'],
+  isReady: UseAsyncStateReturnBase<Data, Params, Shallow>['isReady'],
+  error: UseAsyncStateReturnBase<Data, Params, Shallow>['error'],
+]
+
 export type UseAsyncStateReturn<Data, Params extends any[], Shallow extends boolean> =
   UseAsyncStateReturnBase<Data, Params, Shallow>
-  & PromiseLike<UseAsyncStateReturnBase<Data, Params, Shallow>>
+  & UseAsyncStateReturnArray<Data, Params, Shallow>
+
+export type UseAsyncStateReturnWithThen<Data, Params extends any[], Shallow extends boolean> =
+  UseAsyncStateReturn<Data, Params, Shallow>
+  & UseAsyncStatePromiseLike<Data, Params, Shallow>
 
 export interface UseAsyncStateOptions<Shallow extends boolean, D = any> {
   /**
@@ -82,7 +96,7 @@ export function useAsyncState<Data, Params extends any[] = any[], Shallow extend
   promise: Promise<Data> | ((...args: Params) => Promise<Data>),
   initialState: Data,
   options?: UseAsyncStateOptions<Shallow, Data>,
-): UseAsyncStateReturn<Data, Params, Shallow> {
+): UseAsyncStateReturnWithThen<Data, Params, Shallow> {
   const {
     immediate = true,
     delay = 0,
@@ -141,18 +155,30 @@ export function useAsyncState<Data, Params extends any[] = any[], Shallow extend
     error,
     execute,
   }
+  const arrayShell: UseAsyncStateReturnArray<Data, Params, Shallow> = [
+    state as Shallow extends true ? ShallowRef<Data> : Ref<UnwrapRef<Data>>,
+    execute,
+    isLoading,
+    isReady,
+    error,
+  ]
+
+  type UseAsyncStateThenParams = Parameters<UseAsyncStatePromiseLike<Data, Params, Shallow>['then']>
+  type UseAsyncStateThenReturn = ReturnType<UseAsyncStatePromiseLike<Data, Params, Shallow>['then']>
+  function then(onFulfilled: UseAsyncStateThenParams[0], onRejected: UseAsyncStateThenParams[1]): UseAsyncStateThenReturn {
+    return waitUntilIsLoaded()
+      .then(onFulfilled, onRejected)
+  }
 
   function waitUntilIsLoaded() {
-    return new Promise<UseAsyncStateReturnBase<Data, Params, Shallow>>((resolve, reject) => {
-      until(isLoading).toBe(false).then(() => resolve(shell)).catch(reject)
+    return new Promise<UseAsyncStateReturn<Data, Params, Shallow>>((resolve, reject) => {
+      until(isLoading).toBe(false).then(
+        () => resolve(
+          makeDestructurable(shell, arrayShell),
+        ),
+      ).catch(reject)
     })
   }
 
-  return {
-    ...shell,
-    then(onFulfilled, onRejected) {
-      return waitUntilIsLoaded()
-        .then(onFulfilled, onRejected)
-    },
-  }
+  return makeDestructurable({ ...shell, then }, arrayShell) as UseAsyncStateReturnWithThen<Data, Params, Shallow>
 }