Merge pull request #3 from axios-use/feat-callback-req-params

Feat: callback params add request parameter args

Author: wangcch

README.md

@@ -135,8 +135,8 @@ const [createRequest, { hasPending, cancel }] = useRequest(
     method: "DELETE",
   }),
   {
-    onCompleted: (data, response) => console.info(data, response),
-    onError: (err) => console.info(err),
+    onCompleted: (data, response, paramsArgs) => console.info(data, response, paramsArgs),
+    onError: (err, paramsArgs) => console.info(err, paramsArgs),
   },
 );
 ```
@@ -255,8 +255,8 @@ const [reqState] = useResource(
   }),
   [],
   {
-    onCompleted: (data, response) => console.info(data, response),
-    onError: (err) => console.info(err),
+    onCompleted: (data, response, paramsArgs) => console.info(data, response, paramsArgs),
+    onError: (err, paramsArgs) => console.info(err, paramsArgs),
   },
 );
 ```

src/request.ts

@@ -71,12 +71,19 @@ export type RequestCallbackFn<T extends Request> = {
    * A callback function that's called when your request successfully completes with zero errors.
    * This function is passed the request's result `data` and `response`.
    */
-  onCompleted?: (data: Payload<T, true>, response: Payload<T>) => void;
+  onCompleted?: (
+    data: Payload<T, true>,
+    response: Payload<T>,
+    args: Parameters<T>,
+  ) => void;
   /**
    * A callback function that's called when the request encounters one or more errors.
    * This function is passed an `RequestError` object that contains either a networkError object or a `AxiosError`, depending on the error(s) that occurred.
    */
-  onError?: (err: RequestError<Payload<T>, BodyData<T>>) => void;
+  onError?: (
+    err: RequestError<Payload<T>, BodyData<T>>,
+    args: Parameters<T>,
+  ) => void;
 };
 
 /**

src/useRequest.ts

@@ -83,14 +83,14 @@ export function useRequest<T extends Request>(
               ? options.getResponseItem(res as Payload<T>)
               : requestConfig.getResponseItem(res)
           ) as Payload<T, true>;
-          onCompleted?.(_data, res as Payload<T>);
+          onCompleted?.(_data, res as Payload<T>, args);
           return [_data, res as Payload<T>] as const;
         })
         .catch((err: AxiosError<Payload<T>, BodyData<T>>) => {
           removeCancelToken(_source.token);
 
           const _error = createRequestError(err);
-          onError?.(_error);
+          onError?.(_error, args);
 
           throw _error;
         });

tests/useRequest.test.ts

@@ -32,11 +32,13 @@ describe("useRequest", () => {
 
   test("any type (without `request`)", async () => {
     const [createRequest] = useRequest(getAPIFuncs(true).user.anyTypeList, {
-      onCompleted(data, response) {
+      onCompleted(data, response, args) {
         expectTypeOf(data).toEqualTypeOf<any>();
         expectTypeOf(response).toEqualTypeOf<any>();
+        expectTypeOf(args).toEqualTypeOf<[]>();
         expect(data).toStrictEqual(MOCK_DATA_USER_LIST);
         expect(response.data).toStrictEqual(MOCK_DATA_USER_LIST);
+        expect(args).toStrictEqual([]);
       },
     });
 
@@ -52,11 +54,13 @@ describe("useRequest", () => {
     const [createRequest] = useRequest(
       getAPIFuncs(true).user.anyTypeWithoutGenericityList,
       {
-        onCompleted(data, response) {
+        onCompleted(data, response, args) {
           expectTypeOf(data).toEqualTypeOf<any>();
           expectTypeOf(response).toEqualTypeOf<AxiosResponse<any>>();
+          expectTypeOf(args).toEqualTypeOf<[]>();
           expect(data).toStrictEqual(MOCK_DATA_USER_LIST);
           expect(response.data).toStrictEqual(MOCK_DATA_USER_LIST);
+          expect(args).toStrictEqual([]);
         },
       },
     );
@@ -217,11 +221,13 @@ describe("useRequest", () => {
         }),
       {
         instance: _instance,
-        onCompleted: (d, r) => {
+        onCompleted: (d, r, args) => {
           expect(d).toBeUndefined();
           expectTypeOf(d).toMatchTypeOf<undefined>();
           expect(r).toStrictEqual(mockItem);
           expectTypeOf(r).toMatchTypeOf<MockDataUserItem | undefined>();
+          expectTypeOf(args).toMatchTypeOf<[string]>();
+          expect(args).toStrictEqual([TARGET_ID]);
         },
       },
     );
@@ -264,7 +270,7 @@ describe("useRequest", () => {
       {
         instance: _instance,
         getResponseItem: _getResponseItem,
-        onCompleted: (d, r) => {
+        onCompleted: (d, r, args) => {
           expect(d).toStrictEqual(mockItem);
           expectTypeOf(d).toMatchTypeOf<MockDataUserItem | undefined>();
           expect(r).toStrictEqual({
@@ -273,6 +279,8 @@ describe("useRequest", () => {
             message: "OK",
           });
           expectTypeOf(r).toMatchTypeOf<_MyRes<MockDataUserItem> | undefined>();
+          expectTypeOf(args).toMatchTypeOf<[string]>();
+          expect(args).toStrictEqual([TARGET_ID]);
         },
       },
     );
@@ -313,14 +321,16 @@ describe("useRequest", () => {
           {
             instance: _instance,
             getResponseItem: _getResponseItem,
-            onCompleted: (d, r) => {
+            onCompleted: (d, r, args) => {
               // custom `data` value
               expect(d).toStrictEqual(mockItem?.name);
               expectTypeOf(d).toMatchTypeOf<string | undefined>();
               expect(r.data).toStrictEqual(mockItem);
               expectTypeOf(r).toMatchTypeOf<
                 AxiosResponse<MockDataUserItem> | undefined
               >();
+              expectTypeOf(args).toMatchTypeOf<[string]>();
+              expect(args).toStrictEqual([TARGET_ID]);
             },
           },
         );

tests/useResource.test.ts

@@ -21,14 +21,17 @@ describe("useResource", () => {
       setup() {
         const id = ref("1");
         const params = computed(() => ({ id: unref(id) }));
-        const [res] = useResource(getAPIFuncs(true).user.get, [params], {
-          onCompleted: (d, r) => {
+        const reqFn = getAPIFuncs(true).user.get;
+        const [res] = useResource(reqFn, [params], {
+          onCompleted: (d, r, a) => {
             expectTypeOf(d).toEqualTypeOf<MockDataUserItem | undefined>();
             expectTypeOf(r).toEqualTypeOf<AxiosResponse<MockDataUserItem>>();
+            expectTypeOf(a).toEqualTypeOf<Parameters<typeof reqFn>>();
 
             const _item = MOCK_DATA_USER_LIST.find((i) => i.id === unref(id));
             expect(d).toStrictEqual(_item);
             expect(r.data).toStrictEqual(_item);
+            expect(a).toStrictEqual([{ id: unref(id) }]);
           },
         });
 
@@ -86,9 +89,10 @@ describe("useResource", () => {
     defineComponent({
       setup() {
         const [res] = useResource(getAPIFuncs(true).user.anyTypeList, false, {
-          onCompleted: (d, r) => {
+          onCompleted: (d, r, a) => {
             expectTypeOf(d).toEqualTypeOf<any>();
             expectTypeOf(r).toEqualTypeOf<any>();
+            expectTypeOf(a).toEqualTypeOf<[]>();
           },
         });
 
@@ -107,9 +111,10 @@ describe("useResource", () => {
           getAPIFuncs(true).user.anyTypeWithoutGenericityList,
           false,
           {
-            onCompleted: (d, r) => {
+            onCompleted: (d, r, a) => {
               expectTypeOf(d).toEqualTypeOf<any>();
               expectTypeOf(r).toEqualTypeOf<AxiosResponse<any>>();
+              expectTypeOf(a).toEqualTypeOf<[]>();
             },
           },
         );