feat(useAsyncState): add abort method for force cancelling pending promises

Co-authored-by: robonen <26167508+robonen@users.noreply.github.com>

web/vue/src/composables/state/useAsyncState/index.test.ts

@@ -206,4 +206,113 @@ describe(useAsyncState, () => {
     expect(state.value.a).toBe(1);
     expect(isShallow(state)).toBeFalsy();
   });
+
+  it('aborts pending execution', async () => {
+    let resolvePromise: (value: string) => void;
+    const promiseFn = () => new Promise<string>(resolve => { resolvePromise = resolve; });
+
+    const { state, isLoading, abort, executeImmediately } = useAsyncState(
+      promiseFn,
+      'initial',
+      { immediate: false },
+    );
+
+    executeImmediately();
+    expect(isLoading.value).toBeTruthy();
+
+    abort();
+    expect(isLoading.value).toBeFalsy();
+
+    resolvePromise!('data');
+    await nextTick();
+
+    expect(state.value).toBe('initial');
+  });
+
+  it('abort prevents state update from resolved promise', async () => {
+    let resolvePromise: (value: string) => void;
+    const promiseFn = () => new Promise<string>(resolve => { resolvePromise = resolve; });
+
+    const { state, isLoading, isReady, abort, executeImmediately } = useAsyncState(
+      promiseFn,
+      'initial',
+      { immediate: false },
+    );
+
+    executeImmediately();
+    expect(isLoading.value).toBeTruthy();
+
+    abort();
+    expect(isLoading.value).toBeFalsy();
+
+    resolvePromise!('data');
+    await nextTick();
+
+    expect(state.value).toBe('initial');
+    expect(isReady.value).toBeFalsy();
+  });
+
+  it('abort prevents error handling from rejected promise', async () => {
+    let rejectPromise: (error: Error) => void;
+    const promiseFn = () => new Promise<string>((_, reject) => { rejectPromise = reject; });
+    const onError = vi.fn();
+
+    const { error, abort, executeImmediately } = useAsyncState(
+      promiseFn,
+      'initial',
+      { immediate: false, onError },
+    );
+
+    executeImmediately();
+    abort();
+
+    rejectPromise!(new Error('test-error'));
+    await nextTick();
+
+    expect(error.value).toBe(null);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it('new execute after abort works correctly', async () => {
+    let resolvePromise: (value: string) => void;
+    const promiseFn = () => new Promise<string>(resolve => { resolvePromise = resolve; });
+
+    const { state, isReady, abort, executeImmediately } = useAsyncState(
+      promiseFn,
+      'initial',
+      { immediate: false },
+    );
+
+    executeImmediately();
+    abort();
+
+    executeImmediately();
+    resolvePromise!('new data');
+    await nextTick();
+
+    expect(state.value).toBe('new data');
+    expect(isReady.value).toBeTruthy();
+  });
+
+  it('re-execute cancels previous pending execution', async () => {
+    let callCount = 0;
+    const promiseFn = (value: string) => new Promise<string>(resolve => {
+      callCount++;
+      setTimeout(() => resolve(value), 100);
+    });
+
+    const { state, executeImmediately } = useAsyncState(
+      promiseFn,
+      'initial',
+      { immediate: false },
+    );
+
+    executeImmediately('first');
+    executeImmediately('second');
+
+    await vi.advanceTimersByTimeAsync(100);
+
+    expect(state.value).toBe('second');
+    expect(callCount).toBe(2);
+  });
 });

web/vue/src/composables/state/useAsyncState/index.ts

@@ -19,6 +19,7 @@ export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow ext
   error: Ref<unknown | null>;
   execute: (delay?: number, ...params: Params) => Promise<Data>;
   executeImmediately: (...params: Params) => Promise<Data>;
+  abort: () => void;
 }
 
 export type UseAsyncStateReturn<Data, Params extends any[], Shallow extends boolean> =
@@ -50,7 +51,11 @@ export function useAsyncState<Data, Params extends any[] = [], Shallow extends b
   const isLoading = ref(false);
   const isReady = ref(false);
 
+  let version = 0;
+
   const execute = async (actualDelay = delay, ...params: any[]) => {
+    const currentVersion = ++version;
+
     if (resetOnExecute)
       state.value = initialState;
 
@@ -65,11 +70,18 @@ export function useAsyncState<Data, Params extends any[] = [], Shallow extends b
 
     try {
       const data = await promise;
+
+      if (currentVersion !== version)
+        return state.value as Data;
+
       state.value = data;
       isReady.value = true;
       onSuccess?.(data);
     }
     catch (e: unknown) {
+      if (currentVersion !== version)
+        return state.value as Data;
+
       error.value = e;
       onError?.(e);
 
@@ -77,6 +89,7 @@ export function useAsyncState<Data, Params extends any[] = [], Shallow extends b
         throw e;
     }
     finally {
+      if (currentVersion === version)
         isLoading.value = false;
     }
 
@@ -87,6 +100,11 @@ export function useAsyncState<Data, Params extends any[] = [], Shallow extends b
     return execute(0, ...params);
   };
 
+  const abort = () => {
+    version++;
+    isLoading.value = false;
+  };
+
   if (immediate)
     execute();
 
@@ -97,6 +115,7 @@ export function useAsyncState<Data, Params extends any[] = [], Shallow extends b
     error,
     execute,
     executeImmediately,
+    abort,
   };
 
   function waitResolve() {