fix(useAsyncState): track latest execution to avoid newer results being replaced by outdated ones (#5047)

Author: andreww2012

packages/core/useAsyncState/index.test.ts

@@ -119,4 +119,38 @@ describe('useAsyncState', () => {
     expect(state.value).toBe(100)
     expect(initialState).toBe(state)
   })
+
+  it('does not set `state` from an outdated execution', async () => {
+    const { execute, state } = useAsyncState((returnValue: string, timeout: number) => promiseTimeout(timeout).then(() => returnValue), '')
+    await Promise.all([
+      execute(0, 'foo', 100),
+      execute(0, 'bar', 50),
+    ])
+    expect(state.value).toBe('bar')
+  })
+
+  it('does not set `isReady` from an outdated execution', async () => {
+    const { execute, isReady } = useAsyncState(promiseTimeout, shallowRef<void>())
+    void execute(0, 0)
+    void execute(0, 100)
+    await promiseTimeout(50)
+    expect(isReady.value).toBe(false)
+  })
+
+  it('does not set `isLoading` from an outdated execution', async () => {
+    const { execute, isLoading } = useAsyncState(promiseTimeout, shallowRef<void>())
+    void execute(0, 0)
+    void execute(0, 100)
+    await promiseTimeout(50)
+    expect(isLoading.value).toBe(true)
+  })
+
+  it('does not set `error` from an outdated execution', async () => {
+    const { execute, error } = useAsyncState(promiseTimeout, shallowRef<void>())
+    await Promise.all([
+      execute(0, 100, true),
+      execute(0, 0),
+    ])
+    expect(error.value).toBeUndefined()
+  })
 })

packages/core/useAsyncState/index.ts

@@ -98,7 +98,10 @@ export function useAsyncState<Data, Params extends any[] = any[], Shallow extend
   const isLoading = shallowRef(false)
   const error = shallowRef<unknown | undefined>(undefined)
 
+  let executionsCount = 0
   async function execute(delay = 0, ...args: any[]) {
+    const executionId = (executionsCount += 1)
+
     if (resetOnExecute)
       state.value = toValue(initialState)
     error.value = undefined
@@ -114,18 +117,22 @@ export function useAsyncState<Data, Params extends any[] = any[], Shallow extend
 
     try {
       const data = await _promise
-      state.value = data
-      isReady.value = true
+      if (executionId === executionsCount) {
+        state.value = data
+        isReady.value = true
+      }
       onSuccess(data)
     }
     catch (e) {
-      error.value = e
+      if (executionId === executionsCount)
+        error.value = e
       onError(e)
       if (throwError)
         throw e
     }
     finally {
-      isLoading.value = false
+      if (executionId === executionsCount)
+        isLoading.value = false
     }
 
     return state.value as Data