refactor(packages): @sa/hooks: use-request fir axios

Author: Ohh-889

packages/hooks/src/index.ts

@@ -3,6 +3,7 @@ import useLoading from './use-loading';
 import useCountDownTimer from './use-count-down';
 import useSvgIconRender from './use-svg-icon-render';
 import useHookTable from './use-table';
-export { useBoolean, useLoading, useCountDownTimer, useSvgIconRender, useHookTable };
+import useRequest from './use-request';
+export { useBoolean, useLoading, useCountDownTimer, useSvgIconRender, useHookTable, useRequest };
 
 export * from './use-table';

packages/hooks/src/use-request/Fetch.ts

@@ -1,20 +1,23 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
+import type { FlatResponseData } from '@sa/axios';
+import type { AxiosError } from 'axios';
 import type { MutableRefObject } from 'react';
 import { isFunction } from './utils';
 import type { FetchState, Options, PluginReturn, Service, Subscribe } from './type';
 
-export default class Fetch<TData, TParams extends any[]> {
+export default class Fetch<TData extends FlatResponseData, TParams extends any[]> {
   pluginImpls: PluginReturn<TData, TParams>[];
 
   count: number = 0;
 
   state: FetchState<TData, TParams> = {
     loading: false,
     params: undefined,
+    response: null,
     data: undefined,
-    error: undefined
+    error: null
   };
 
   // eslint-disable-next-line max-params
@@ -86,36 +89,40 @@ export default class Fetch<TData, TParams extends any[]> {
       // const formattedResult = this.options.formatResultRef.current ? this.options.formatResultRef.current(res) : res;
 
       this.setState({
-        data: res,
-        error: undefined,
+        data: res.data,
+        error: null,
+        response: res.response,
         loading: false
       });
 
-      this.options.onSuccess?.(res, params);
+      this.options.onSuccess?.(res.data, params);
       this.runPluginHandler('onSuccess', res, params);
 
-      this.options.onFinally?.(params, res, undefined);
+      this.options.onFinally?.(params, res.data, null);
 
       if (currentCount === this.count) {
-        this.runPluginHandler('onFinally', params, res, undefined);
+        this.runPluginHandler('onFinally', params, res, null);
       }
 
       return res;
     } catch (error) {
+      const errorMessage = error as AxiosError;
       if (currentCount !== this.count) {
         // prevent run.then when request is canceled
         return new Promise(() => {});
       }
 
       this.setState({
-        error,
+        error: errorMessage,
+        data: null,
+        response: error.response,
         loading: false
       });
 
-      this.options.onError?.(error, params);
+      this.options.onError?.(errorMessage, params);
       this.runPluginHandler('onError', error, params);
 
-      this.options.onFinally?.(params, undefined, error);
+      this.options.onFinally?.(params, undefined, errorMessage);
 
       if (currentCount === this.count) {
         this.runPluginHandler('onFinally', params, undefined, error);
@@ -150,7 +157,7 @@ export default class Fetch<TData, TParams extends any[]> {
     return this.runAsync(...(this.state.params || []));
   }
 
-  mutate(data?: TData | ((oldData?: TData) => TData | undefined)) {
+  mutate(data?: TData | ((oldData: TData | null) => TData | null)) {
     const targetData = isFunction(data) ? data(this.state.data) : data;
     this.runPluginHandler('onMutate', targetData);
     this.setState({

packages/hooks/src/use-request/index.ts

@@ -0,0 +1,3 @@
+import useRequest from './useRequest';
+
+export default useRequest;

packages/hooks/src/use-request/type.ts

@@ -1,4 +1,6 @@
 import type { DependencyList } from 'react';
+import type { FlatResponseData } from '@sa/axios';
+import type { AxiosError } from 'axios';
 import type Fetch from './Fetch';
 import type { CachedData } from './utils/cache';
 
@@ -7,19 +9,20 @@ export type Subscribe = () => void;
 
 // for Fetch
 
-export interface FetchState<TData, TParams extends any[]> {
+export interface FetchState<TData extends FlatResponseData, TParams extends any[]> {
   loading: boolean;
   params?: TParams;
-  data?: TData;
-  error?: Error;
+  response: TData['response'];
+  data: null | TData['data'];
+  error: AxiosError | null;
 }
 
 export interface PluginReturn<TData, TParams extends any[]> {
   onBefore?: (params: TParams) =>
     | ({
         stopNow?: boolean;
         returnNow?: boolean;
-      } & Partial<FetchState<TData, TParams>>)
+      } & Partial<FetchState<FlatResponseData, TParams>>)
     | null;
 
   onRequest?: (
@@ -30,25 +33,21 @@ export interface PluginReturn<TData, TParams extends any[]> {
   };
 
   onSuccess?: (data: TData, params: TParams) => void;
-  onError?: (e: Error, params: TParams) => void;
-  onFinally?: (params: TParams, data?: TData, e?: Error) => void;
+  onError?: (e: AxiosError, params: TParams) => void;
+  onFinally?: (params: TParams, data?: TData, e?: AxiosError) => void;
   onCancel?: () => void;
   onMutate?: (data: TData) => void;
 }
 
 // for useRequestImplement
 
-export interface Options<TData, TParams extends any[]> {
+export interface Options<TData extends FlatResponseData, TParams extends any[]> {
   manual?: boolean;
-
   onBefore?: (params: TParams) => void;
-  onSuccess?: (data: TData, params: TParams) => void;
+  onSuccess?: (data: TData['data'], params: TParams) => void;
   onError?: (e: Error, params: TParams) => void;
-  // formatResult?: (res: any) => TData;
-  onFinally?: (params: TParams, data?: TData, e?: Error) => void;
-
+  onFinally?: (params: TParams, data: TData['data'] | null, e: Error | null) => void;
   defaultParams?: TParams;
-
   // refreshDeps
   refreshDeps?: DependencyList;
   refreshDepsAction?: () => void;
@@ -93,23 +92,12 @@ export interface Options<TData, TParams extends any[]> {
   // [key: string]: any;
 }
 
-export type Plugin<TData, TParams extends any[]> = {
+export type Plugin<TData extends FlatResponseData, TParams extends any[]> = {
   (fetchInstance: Fetch<TData, TParams>, options: Options<TData, TParams>): PluginReturn<TData, TParams>;
   onInit?: (options: Options<TData, TParams>) => Partial<FetchState<TData, TParams>>;
 };
 
-// for index
-// export type OptionsWithoutFormat<TData, TParams extends any[]> = Omit<Options<TData, TParams>, 'formatResult'>;
-
-// export interface OptionsWithFormat<TData, TParams extends any[], TFormated, TTFormated extends TFormated = any> extends Omit<Options<TTFormated, TParams>, 'formatResult'> {
-//   formatResult: (res: TData) => TFormated;
-// };
-
-export interface Result<TData, TParams extends any[]> {
-  loading: boolean;
-  data?: TData;
-  error?: Error;
-  params: TParams | [];
+export interface Result<TData extends FlatResponseData, TParams extends any[]> extends FetchState<TData, TParams> {
   cancel: Fetch<TData, TParams>['cancel'];
   refresh: Fetch<TData, TParams>['refresh'];
   refreshAsync: Fetch<TData, TParams>['refreshAsync'];

packages/hooks/src/use-request/useRequest.ts

@@ -1,3 +1,4 @@
+import type { FlatResponseData } from '@sa/axios';
 import useAutoRunPlugin from './plugins/useAutoRunPlugin';
 import useCachePlugin from './plugins/useCachePlugin';
 import useDebouncePlugin from './plugins/useDebouncePlugin';
@@ -9,7 +10,7 @@ import useThrottlePlugin from './plugins/useThrottlePlugin';
 import type { Options, Plugin, Service } from './type';
 import useRequestImplement from './useRequestImplement';
 
-function useRequest<TData, TParams extends any[]>(
+function useRequest<TData extends FlatResponseData, TParams extends any[]>(
   service: Service<TData, TParams>,
   options?: Options<TData, TParams>,
   plugins?: Plugin<TData, TParams>[]

packages/hooks/src/use-request/useRequestImplement.ts

@@ -1,13 +1,19 @@
 import { useCreation, useLatest, useMemoizedFn, useMount, useUnmount, useUpdate } from 'ahooks';
+import type { FlatResponseData } from '@sa/axios';
 import { isDev } from './utils';
 import Fetch from './Fetch';
 import type { Options, Plugin, Result, Service } from './type';
 
-function useRequestImplement<TData, TParams extends any[]>(
+function useRequestImplement<
+  TData extends FlatResponseData<T, ResponseData>,
+  TParams extends any[],
+  T = any,
+  ResponseData = any
+>(
   service: Service<TData, TParams>,
   options: Options<TData, TParams> = {},
   plugins: Plugin<TData, TParams>[] = []
-) {
+): Result<TData, TParams> {
   const { manual = false, ready = true, ...rest } = options;
 
   if (isDev) {

packages/hooks/src/use-request/utils/index.ts

@@ -2,4 +2,4 @@ export const isFunction = (value: unknown): value is (...args: any) => any => ty
 
 export const isBrowser = Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
 
-export const isDev = import.meta.env.NODE_ENV === 'development' || import.meta.env.env.NODE_ENV === 'test';
+export const isDev = import.meta.env.DEV;