feat: add onBefore and onAfter hooks #42

Author: John60676

src/__tests__/index.test.tsx

@@ -2463,4 +2463,35 @@ describe('useRequest', () => {
     expect(VISIBLE_LISTENER.size).toBe(8);
     expect(RECONNECT_LISTENER.size).toBe(4);
   });
+
+  test('onBefore and onAfter hooks can use', async () => {
+    const onBefore = jest.fn();
+    const onAfter = jest.fn();
+
+    const wrapper = shallowMount(
+      defineComponent({
+        setup() {
+          const { data, run } = useRequest(request, {
+            onBefore,
+            onAfter,
+          });
+
+          return () => (
+            <button onClick={() => run()}>{`data:${data.value}`}</button>
+          );
+        },
+      }),
+    );
+    expect(onBefore).toHaveBeenCalledTimes(1);
+    expect(onAfter).toHaveBeenCalledTimes(0);
+    await waitForTime(100);
+    expect(onBefore).toHaveBeenCalledTimes(1);
+    expect(onAfter).toHaveBeenCalledTimes(0);
+    await waitForTime(800);
+    expect(onBefore).toHaveBeenCalledTimes(1);
+    expect(onAfter).toHaveBeenCalledTimes(0);
+    await waitForTime(100);
+    expect(onBefore).toHaveBeenCalledTimes(1);
+    expect(onAfter).toHaveBeenCalledTimes(1);
+  });
 });

src/__tests__/load-more.test.tsx

@@ -827,4 +827,45 @@ describe('useLoadMore', () => {
     expect(wrapper.find('#D').text()).toBe('1');
     expect(wrapper.find('#E').text()).toBe('5');
   });
+
+  test('onBefore and onAfter hooks can use in `useLoadMore`', async () => {
+    const onBefore = jest.fn();
+    const onAfter = jest.fn();
+
+    const wrapper = shallowMount(
+      defineComponent({
+        setup() {
+          const { loadMore } = useLoadMore(normalRequest, {
+            onBefore,
+            onAfter,
+          });
+          return () => (
+            <div>
+              <div
+                class="loadMore"
+                onClick={() => {
+                  loadMore();
+                }}
+              />
+            </div>
+          );
+        },
+      }),
+    );
+
+    const loadMoreEl = wrapper.find('.loadMore');
+
+    expect(onBefore).toHaveBeenCalledTimes(1);
+    expect(onAfter).toHaveBeenCalledTimes(0);
+    await waitForTime(1000);
+    expect(onBefore).toHaveBeenCalledTimes(1);
+    expect(onAfter).toHaveBeenCalledTimes(1);
+
+    await loadMoreEl.trigger('click');
+    expect(onBefore).toHaveBeenCalledTimes(2);
+    expect(onAfter).toHaveBeenCalledTimes(1);
+    await waitForTime(1000);
+    expect(onBefore).toHaveBeenCalledTimes(2);
+    expect(onAfter).toHaveBeenCalledTimes(2);
+  });
 });

src/__tests__/pagination.test.tsx

@@ -625,4 +625,43 @@ describe('usePagination', () => {
     expect(wrapper.find('#D').text()).toBe('1');
     expect(wrapper.find('#E').text()).toBe('5');
   });
+
+  test('onBefore and onAfter hooks can use in `usePagination`', async () => {
+    const onBefore = jest.fn();
+    const onAfter = jest.fn();
+
+    const wrapper = shallowMount(
+      defineComponent({
+        setup() {
+          const { changeCurrent } = usePagination<NormalMockDataType>(
+            normalApi,
+            {
+              onBefore,
+              onAfter,
+            },
+          );
+          return () => (
+            <div>
+              <button class="button" onClick={() => changeCurrent(1)} />
+            </div>
+          );
+        },
+      }),
+    );
+
+    const buttonEl = wrapper.find('.button');
+
+    expect(onBefore).toHaveBeenCalledTimes(1);
+    expect(onAfter).toHaveBeenCalledTimes(0);
+    await waitForTime(1000);
+    expect(onBefore).toHaveBeenCalledTimes(1);
+    expect(onAfter).toHaveBeenCalledTimes(1);
+
+    await buttonEl.trigger('click');
+    expect(onBefore).toHaveBeenCalledTimes(2);
+    expect(onAfter).toHaveBeenCalledTimes(1);
+    await waitForTime(1000);
+    expect(onBefore).toHaveBeenCalledTimes(2);
+    expect(onAfter).toHaveBeenCalledTimes(2);
+  });
 });

src/core/config.ts

@@ -56,6 +56,8 @@ export type BaseOptions<R, P extends unknown[]> = GlobalOptions & {
   queryKey?: (...args: P) => string;
   onSuccess?: (data: R, params: P) => void;
   onError?: (error: Error, params: P) => void;
+  onBefore?: (params: P) => void;
+  onAfter?: (params: P) => void;
 };
 
 const FRPlaceholderType = Symbol('FR');

src/core/createQuery.ts

@@ -78,6 +78,8 @@ const createQuery = <R, P extends unknown[]>(
     formatResult,
     onSuccess,
     onError,
+    onBefore,
+    onAfter,
   } = config;
 
   const retriedCount = ref(0);
@@ -193,6 +195,9 @@ const createQuery = <R, P extends unknown[]>(
     count.value += 1;
     const currentCount = count.value;
 
+    // onBefore hooks
+    onBefore?.(args);
+
     return query(...args)
       .then(res => {
         if (currentCount === count.value) {
@@ -238,6 +243,9 @@ const createQuery = <R, P extends unknown[]>(
 
           // run for polling
           pollingTimer.value = polling(() => _run(...args));
+
+          // onAfter hooks
+          onAfter?.(args);
         }
       });
   };

src/core/useAsyncQuery.ts

@@ -84,6 +84,8 @@ function useAsyncQuery<R, P extends unknown[], FR>(
     formatResult,
     onSuccess,
     onError,
+    onBefore,
+    onAfter,
   } = { ...getGlobalOptions(), ...injectedGlobalOptions, ...options };
 
   const stopPollingWhenHiddenOrOffline = ref(false);
@@ -134,6 +136,8 @@ function useAsyncQuery<R, P extends unknown[], FR>(
     formatResult,
     onSuccess,
     onError,
+    onBefore,
+    onAfter,
   } as Config<R, P>;
 
   const loading = ref(false);