fix: 解决ts报错

Author: Ohh-889

.env

@@ -14,8 +14,6 @@ VITE_ICON_LOCAL_PREFIX=icon-local
 # constant route & auth route mode: static ｜ dynamic
 VITE_AUTH_ROUTE_MODE=static
 
-VITE_CONSTANT_ROUTE_MODE=static
-
 # static auth route home path
 VITE_ROUTE_HOME=/home
 

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

@@ -13,6 +13,8 @@ export default class Fetch<TData extends FlatResponseData, TParams extends any[]
 
   count: number = 0;
 
+  options: Options<TData, TParams>;
+
   state: FetchState<TData, TParams> = {
     data: undefined,
     error: null,
@@ -21,25 +23,25 @@ export default class Fetch<TData extends FlatResponseData, TParams extends any[]
     response: null
   };
 
-  // eslint-disable-next-line max-params
   constructor(
     public serviceRef: MutableRefObject<Service<TData, TParams>>,
     public options: Options<TData, TParams>,
-    public subscribe: Subscribe,
-    public initState: Partial<FetchState<TData, TParams>> = {}
+    public subscribe: Subscribe
   ) {
     this.state = {
       ...this.state,
-      loading: !options.manual,
-      ...initState
+      loading: !options.manual
     };
+
+    this.options = options;
   }
 
   setState(s: Partial<FetchState<TData, TParams>> = {}) {
     this.state = {
       ...this.state,
       ...s
     };
+
     this.subscribe();
   }
 
@@ -143,6 +145,7 @@ export default class Fetch<TData extends FlatResponseData, TParams extends any[]
 
   cancel() {
     this.count += 1;
+
     this.setState({
       loading: false
     });

packages/hooks/src/use-request/plugins/useAutoRunPlugin.ts

@@ -1,36 +1,21 @@
-import { useUpdateEffect } from 'ahooks';
-import { useRef } from 'react';
+import { useEffect } from 'react';
 
 import type { Plugin } from '../type';
 
 // support refreshDeps & ready
 const useAutoRunPlugin: Plugin<any, any[]> = (
   fetchInstance,
-  { defaultParams = [], manual, ready = true, refreshDeps = [], refreshDepsAction }
+  { manual, params = {}, ready = true, refreshDepsAction }
 ) => {
-  const hasAutoRun = useRef(false);
-  hasAutoRun.current = false;
-
-  useUpdateEffect(() => {
+  useEffect(() => {
     if (!manual && ready) {
-      hasAutoRun.current = true;
-      fetchInstance.run(...defaultParams);
-    }
-  }, [ready]);
-
-  useUpdateEffect(() => {
-    if (hasAutoRun.current) {
-      return;
-    }
-    if (!manual) {
-      hasAutoRun.current = true;
       if (refreshDepsAction) {
         refreshDepsAction();
       } else {
-        fetchInstance.refresh();
+        fetchInstance.runAsync(params);
       }
     }
-  }, [...refreshDeps]);
+  }, [JSON.stringify(params), ready]);
 
   return {
     onBefore: () => {

packages/hooks/src/use-request/plugins/useCachePlugin.ts

@@ -11,9 +11,9 @@ const useCachePlugin: Plugin<any, any[]> = (
   fetchInstance,
   { cacheKey, cacheTime = 5 * 60 * 1000, getCache: customGetCache, setCache: customSetCache, staleTime = 0 }
 ) => {
-  const unSubscribeRef = useRef<() => void>();
+  const unSubscribeRef = useRef<() => void>(null);
 
-  const currentPromiseRef = useRef<Promise<any>>();
+  const currentPromiseRef = useRef<Promise<any>>(null);
 
   const _setCache = (key: string, cachedData: CachedData) => {
     if (customSetCache) {

packages/hooks/src/use-request/plugins/useDebouncePlugin.ts

@@ -1,5 +1,5 @@
-import type { DebounceSettings, DebouncedFunc } from 'lodash';
-import debounce from 'lodash/debounce';
+import type { DebounceSettings, DebouncedFunc } from 'lodash-es';
+import { debounce } from 'lodash-es';
 import { useEffect, useMemo, useRef } from 'react';
 
 import type { Plugin } from '../type';
@@ -8,7 +8,7 @@ const useDebouncePlugin: Plugin<any, any[]> = (
   fetchInstance,
   { debounceLeading, debounceMaxWait, debounceTrailing, debounceWait }
 ) => {
-  const debouncedRef = useRef<DebouncedFunc<any>>();
+  const debouncedRef = useRef<DebouncedFunc<any>>(null);
 
   const options = useMemo(() => {
     const ret: DebounceSettings = {};

packages/hooks/src/use-request/plugins/useLoadingDelayPlugin.ts

@@ -3,7 +3,7 @@ import { useRef } from 'react';
 import type { Plugin, Timeout } from '../type';
 
 const useLoadingDelayPlugin: Plugin<any, any[]> = (fetchInstance, { loadingDelay, ready }) => {
-  const timerRef = useRef<Timeout>();
+  const timerRef = useRef<Timeout>(null);
 
   if (!loadingDelay) {
     return {};

packages/hooks/src/use-request/plugins/usePollingPlugin.ts

@@ -9,8 +9,8 @@ const usePollingPlugin: Plugin<any, any[]> = (
   fetchInstance,
   { pollingErrorRetryCount = -1, pollingInterval, pollingWhenHidden = true }
 ) => {
-  const timerRef = useRef<Timeout>();
-  const unsubscribeRef = useRef<() => void>();
+  const timerRef = useRef<Timeout>(null);
+  const unsubscribeRef = useRef<() => void>(null);
   const countRef = useRef<number>(0);
 
   const stopPolling = () => {

packages/hooks/src/use-request/plugins/useRefreshOnWindowFocusPlugin.ts

@@ -9,7 +9,7 @@ const useRefreshOnWindowFocusPlugin: Plugin<any, any[]> = (
   fetchInstance,
   { focusTimespan = 5000, refreshOnWindowFocus }
 ) => {
-  const unsubscribeRef = useRef<() => void>();
+  const unsubscribeRef = useRef<() => void>(null);
 
   const stopSubscribe = () => {
     unsubscribeRef.current?.();

packages/hooks/src/use-request/plugins/useRetryPlugin.ts

@@ -3,7 +3,7 @@ import { useRef } from 'react';
 import type { Plugin, Timeout } from '../type';
 
 const useRetryPlugin: Plugin<any, any[]> = (fetchInstance, { retryCount, retryInterval }) => {
-  const timerRef = useRef<Timeout>();
+  const timerRef = useRef<Timeout>(null);
   const countRef = useRef(0);
 
   const triggerByRetry = useRef(false);

packages/hooks/src/use-request/plugins/useThrottlePlugin.ts

@@ -1,11 +1,11 @@
-import type { DebouncedFunc, ThrottleSettings } from 'lodash';
-import throttle from 'lodash/throttle';
+import type { DebouncedFunc, ThrottleSettings } from 'lodash-es';
+import { throttle } from 'lodash-es';
 import { useEffect, useRef } from 'react';
 
 import type { Plugin } from '../type';
 
 const useThrottlePlugin: Plugin<any, any[]> = (fetchInstance, { throttleLeading, throttleTrailing, throttleWait }) => {
-  const throttledRef = useRef<DebouncedFunc<any>>();
+  const throttledRef = useRef<DebouncedFunc<any>>(null);
 
   const options: ThrottleSettings = {};
   if (throttleLeading !== undefined) {

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

@@ -1,6 +1,6 @@
-import type { FlatResponseData } from '@sa/axios';
 import type { AxiosError } from 'axios';
-import type { DependencyList } from 'react';
+
+import type { FlatResponseData } from '@sa/axios';
 
 import type Fetch from './Fetch';
 import type { CachedData } from './utils/cache';
@@ -11,100 +11,102 @@ export type Subscribe = () => void;
 // for Fetch
 
 export interface FetchState<TData extends FlatResponseData, TParams extends any[]> {
-  data: null | TData['data'];
-  error: AxiosError | null;
-  loading: boolean;
-  params?: TParams;
-  response: TData['response'];
+  loading: boolean;
+  params?: TParams;
+  response: TData['response'];
+  data: NonNullable<TData['data']>;
+  error: AxiosError | null;
 }
 
-export interface PluginReturn<TData, TParams extends any[]> {
-  onBefore?: (params: TParams) =>
-    | ({
-        returnNow?: boolean;
-        stopNow?: boolean;
-      } & Partial<FetchState<FlatResponseData, TParams>>)
-    | null;
-
-  onCancel?: () => void;
-
-  onError?: (e: AxiosError, params: TParams) => void;
-  onFinally?: (params: TParams, data?: TData, e?: AxiosError) => void;
-  onMutate?: (data: TData) => void;
-  onRequest?: (
-    service: Service<TData, TParams>,
-    params: TParams
-  ) => {
-    servicePromise?: Promise<TData>;
-  };
-  onSuccess?: (data: TData, params: TParams) => void;
+export interface PluginReturn<TData extends FlatResponseData, TParams extends any[]> {
+  onBefore?: (params: TParams) =>
+    | ({
+        stopNow?: boolean;
+        returnNow?: boolean;
+      } & Partial<FetchState<FlatResponseData, TParams>>)
+    | null;
+
+  onRequest?: (
+    service: Service<TData, TParams>,
+    params: TParams
+  ) => {
+    servicePromise?: Promise<TData>;
+  };
+
+  onSuccess?: (data: TData['data'], params: TParams) => void;
+  onError?: (e: AxiosError, params: TParams) => void;
+  onFinally?: (params: TParams, data?: TData, e?: AxiosError) => void;
+  onCancel?: () => void;
+  onMutate?: (data: TData['data']) => void;
 }
 
 // for useRequestImplement
 
 export interface Options<TData extends FlatResponseData, TParams extends any[]> {
-  // cache
-  cacheKey?: string;
-  cacheTime?: number;
-  debounceLeading?: boolean;
-  debounceMaxWait?: number;
-  debounceTrailing?: boolean;
-  // debounce
-  debounceWait?: number;
-  defaultParams?: TParams;
-  focusTimespan?: number;
-
-  getCache?: (params: TParams) => CachedData<TData, TParams> | undefined;
-
-  // loading delay
-  loadingDelay?: number;
-  manual?: boolean;
-  onBefore?: (params: TParams) => void;
-
-  onError?: (e: Error, params: TParams) => void;
-  onFinally?: (params: TParams, data: TData['data'] | null, e: Error | null) => void;
-
-  onSuccess?: (data: TData['data'], params: TParams) => void;
-  pollingErrorRetryCount?: number;
-  // polling
-  pollingInterval?: number;
-  pollingWhenHidden?: boolean;
-
-  // ready
-  ready?: boolean;
-  // refreshDeps
-  refreshDeps?: DependencyList;
-  refreshDepsAction?: () => void;
-
-  // refresh on window focus
-  refreshOnWindowFocus?: boolean;
-  // retry
-  retryCount?: number;
-  retryInterval?: number;
-  setCache?: (data: CachedData<TData, TParams>) => void;
-  staleTime?: number;
-
-  throttleLeading?: boolean;
-  throttleTrailing?: boolean;
-
-  // throttle
-  throttleWait?: number;
-
-  // [key: string]: any;
+  manual?: boolean;
+  onBefore?: (params: TParams) => void;
+  onSuccess?: (data: TData['data'], params: TParams) => void;
+  onError?: (e: Error, params: TParams) => void;
+  defaultData?: TData['data'];
+  onFinally?: (params: TParams, data: TData['data'] | null, e: Error | null) => void;
+  defaultParams?: TParams;
+  // refreshDeps
+  params?: TParams[0];
+  refreshDepsAction?: () => void;
+
+  // loading delay
+  loadingDelay?: number;
+
+  // polling
+  pollingInterval?: number;
+  pollingWhenHidden?: boolean;
+  pollingErrorRetryCount?: number;
+
+  // refresh on window focus
+  refreshOnWindowFocus?: boolean;
+  focusTimespan?: number;
+
+  // debounce
+  debounceWait?: number;
+  debounceLeading?: boolean;
+  debounceTrailing?: boolean;
+  debounceMaxWait?: number;
+
+  // throttle
+  throttleWait?: number;
+  throttleLeading?: boolean;
+  throttleTrailing?: boolean;
+
+  // cache
+  cacheKey?: string;
+  cacheTime?: number;
+  staleTime?: number;
+  setCache?: (data: CachedData<TData, TParams>) => void;
+  getCache?: (params: TParams) => CachedData<TData, TParams> | undefined;
+
+  // retry
+  retryCount?: number;
+  retryInterval?: number;
+
+  // ready
+  ready?: boolean;
+
+  // [key: string]: 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>>;
+  (fetchInstance: Fetch<TData, TParams>, options: Options<TData, TParams>): PluginReturn<TData, TParams>;
+  onInit?: (options: Options<TData, TParams>) => Partial<FetchState<TData, TParams>>;
 };
 
 export interface Result<TData extends FlatResponseData, TParams extends any[]> extends FetchState<TData, TParams> {
-  cancel: Fetch<TData, TParams>['cancel'];
-  mutate: Fetch<TData, TParams>['mutate'];
-  refresh: Fetch<TData, TParams>['refresh'];
-  refreshAsync: Fetch<TData, TParams>['refreshAsync'];
-  run: Fetch<TData, TParams>['run'];
-  runAsync: Fetch<TData, TParams>['runAsync'];
+  cancel: Fetch<TData, TParams>['cancel'];
+  refresh: Fetch<TData, TParams>['refresh'];
+  refreshAsync: Fetch<TData, TParams>['refreshAsync'];
+  run: Fetch<TData, TParams>['run'];
+  runAsync: Fetch<TData, TParams>['runAsync'];
+  mutate: Fetch<TData['data'], TParams>['mutate'];
 }
 
 export type Timeout = ReturnType<typeof setTimeout>;
+