chore: add onCancel for useRequest

alibaba · Dec 6, 2024 · d7ec8fe · d7ec8fe
1 parent c7bb04c
commit d7ec8fe
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git a/packages/hooks/src/useRequest/doc/basic/basic.en-US.md b/packages/hooks/src/useRequest/doc/basic/basic.en-US.md
@@ -62,6 +62,7 @@ Next, we will demonstrate the difference between `run` and `runAsync` through th
 - `onSuccess`: Triggered when the request is resolved
 - `onError`: Triggered when the request is rejected
 - `onFinally`: Triggered when the request is completed
+- `onCancel`: Triggered when the request is canceled
 
 <code src="./demo/lifeCycle.tsx" />
 

diff --git a/packages/hooks/src/useRequest/doc/basic/basic.zh-CN.md b/packages/hooks/src/useRequest/doc/basic/basic.zh-CN.md
@@ -62,6 +62,7 @@ const { loading, run, runAsync } = useRequest(service, {
 - `onSuccess`：请求成功触发
 - `onError`：请求失败触发
 - `onFinally`：请求完成触发
+- `onCancel`：请求取消触发
 
 <code src="./demo/lifeCycle.tsx" />
 

diff --git a/packages/hooks/src/useRequest/src/Fetch.ts b/packages/hooks/src/useRequest/src/Fetch.ts
@@ -135,12 +135,15 @@ export default class Fetch<TData, TParams extends any[]> {
     });
   }
 
-  cancel() {
+  cancel(isUnmount = false) {
     this.count += 1;
     this.setState({
       loading: false,
     });
 
+    if(!isUnmount){
+      this.options.onCancel?.();
+    }
     this.runPluginHandler('onCancel');
   }
 

diff --git a/packages/hooks/src/useRequest/src/types.ts b/packages/hooks/src/useRequest/src/types.ts
@@ -46,6 +46,7 @@ export interface Options<TData, TParams extends any[]> {
   onError?: (e: Error, params: TParams) => void;
   // formatResult?: (res: any) => TData;
   onFinally?: (params: TParams, data?: TData, e?: Error) => void;
+  onCancel?: () => void;
 
   defaultParams?: TParams;
 

diff --git a/packages/hooks/src/useRequest/src/useRequestImplement.ts b/packages/hooks/src/useRequest/src/useRequestImplement.ts
@@ -56,7 +56,7 @@ function useRequestImplement<TData, TParams extends any[]>(
   });
 
   useUnmount(() => {
-    fetchInstance.cancel();
+    fetchInstance.cancel(true);
   });
 
   return {