feat(packages): @sa/hooks add useRequest

Author: Ohh-889

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

@@ -0,0 +1,160 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+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[]> {
+  pluginImpls: PluginReturn<TData, TParams>[];
+
+  count: number = 0;
+
+  state: FetchState<TData, TParams> = {
+    loading: false,
+    params: undefined,
+    data: undefined,
+    error: undefined
+  };
+
+  // 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>> = {}
+  ) {
+    this.state = {
+      ...this.state,
+      loading: !options.manual,
+      ...initState
+    };
+  }
+
+  setState(s: Partial<FetchState<TData, TParams>> = {}) {
+    this.state = {
+      ...this.state,
+      ...s
+    };
+    this.subscribe();
+  }
+
+  runPluginHandler(event: keyof PluginReturn<TData, TParams>, ...rest: any[]) {
+    const r = this.pluginImpls.map(i => i[event]?.(...rest)).filter(Boolean);
+    return Object.assign({}, ...r);
+  }
+
+  async runAsync(...params: TParams): Promise<TData> {
+    this.count += 1;
+    const currentCount = this.count;
+
+    const { stopNow = false, returnNow = false, ...state } = this.runPluginHandler('onBefore', params);
+
+    // stop request
+    if (stopNow) {
+      return new Promise(() => {});
+    }
+
+    this.setState({
+      loading: true,
+      params,
+      ...state
+    });
+
+    // return now
+    if (returnNow) {
+      return Promise.resolve(state.data);
+    }
+
+    this.options.onBefore?.(params);
+
+    try {
+      // replace service
+      let { servicePromise } = this.runPluginHandler('onRequest', this.serviceRef.current, params);
+
+      if (!servicePromise) {
+        servicePromise = this.serviceRef.current(...params);
+      }
+
+      const res = await servicePromise;
+
+      if (currentCount !== this.count) {
+        // prevent run.then when request is canceled
+        return new Promise(() => {});
+      }
+
+      // const formattedResult = this.options.formatResultRef.current ? this.options.formatResultRef.current(res) : res;
+
+      this.setState({
+        data: res,
+        error: undefined,
+        loading: false
+      });
+
+      this.options.onSuccess?.(res, params);
+      this.runPluginHandler('onSuccess', res, params);
+
+      this.options.onFinally?.(params, res, undefined);
+
+      if (currentCount === this.count) {
+        this.runPluginHandler('onFinally', params, res, undefined);
+      }
+
+      return res;
+    } catch (error) {
+      if (currentCount !== this.count) {
+        // prevent run.then when request is canceled
+        return new Promise(() => {});
+      }
+
+      this.setState({
+        error,
+        loading: false
+      });
+
+      this.options.onError?.(error, params);
+      this.runPluginHandler('onError', error, params);
+
+      this.options.onFinally?.(params, undefined, error);
+
+      if (currentCount === this.count) {
+        this.runPluginHandler('onFinally', params, undefined, error);
+      }
+
+      throw error;
+    }
+  }
+
+  run(...params: TParams) {
+    this.runAsync(...params).catch(error => {
+      if (!this.options.onError) {
+        console.error(error);
+      }
+    });
+  }
+
+  cancel() {
+    this.count += 1;
+    this.setState({
+      loading: false
+    });
+
+    this.runPluginHandler('onCancel');
+  }
+
+  refresh() {
+    this.run(...(this.state.params || []));
+  }
+
+  refreshAsync() {
+    return this.runAsync(...(this.state.params || []));
+  }
+
+  mutate(data?: TData | ((oldData?: TData) => TData | undefined)) {
+    const targetData = isFunction(data) ? data(this.state.data) : data;
+    this.runPluginHandler('onMutate', targetData);
+    this.setState({
+      data: targetData
+    });
+  }
+}

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

@@ -0,0 +1,52 @@
+import { useRef } from 'react';
+import { useUpdateEffect } from 'ahooks';
+import type { Plugin } from '../type';
+
+// support refreshDeps & ready
+const useAutoRunPlugin: Plugin<any, any[]> = (
+  fetchInstance,
+  { manual, ready = true, defaultParams = [], refreshDeps = [], refreshDepsAction }
+) => {
+  const hasAutoRun = useRef(false);
+  hasAutoRun.current = false;
+
+  useUpdateEffect(() => {
+    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();
+      }
+    }
+  }, [...refreshDeps]);
+
+  return {
+    onBefore: () => {
+      if (!ready) {
+        return {
+          stopNow: true
+        };
+      }
+      return null;
+    }
+  };
+};
+
+useAutoRunPlugin.onInit = ({ ready = true, manual }) => {
+  return {
+    loading: !manual && ready
+  };
+};
+
+export default useAutoRunPlugin;

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

@@ -0,0 +1,131 @@
+import { useRef } from 'react';
+import { useCreation, useUnmount } from 'ahooks';
+import type { Plugin } from '../type';
+import { getCache, setCache } from '../utils/cache';
+import type { CachedData } from '../utils/cache';
+import { getCachePromise, setCachePromise } from '../utils/cachePromise';
+import { subscribe, trigger } from '../utils/cacheSubscribe';
+
+const useCachePlugin: Plugin<any, any[]> = (
+  fetchInstance,
+  { cacheKey, cacheTime = 5 * 60 * 1000, staleTime = 0, setCache: customSetCache, getCache: customGetCache }
+) => {
+  const unSubscribeRef = useRef<() => void>();
+
+  const currentPromiseRef = useRef<Promise<any>>();
+
+  const _setCache = (key: string, cachedData: CachedData) => {
+    if (customSetCache) {
+      customSetCache(cachedData);
+    } else {
+      setCache(key, cacheTime, cachedData);
+    }
+    trigger(key, cachedData.data);
+  };
+
+  const _getCache = (key: string, params: any[] = []) => {
+    if (customGetCache) {
+      return customGetCache(params);
+    }
+    return getCache(key);
+  };
+
+  useCreation(() => {
+    if (!cacheKey) {
+      return;
+    }
+
+    // get data from cache when init
+    const cacheData = _getCache(cacheKey);
+    if (cacheData && Object.hasOwn(cacheData, 'data')) {
+      fetchInstance.state.data = cacheData.data;
+      fetchInstance.state.params = cacheData.params;
+      if (staleTime === -1 || new Date().getTime() - cacheData.time <= staleTime) {
+        fetchInstance.state.loading = false;
+      }
+    }
+
+    // subscribe same cachekey update, trigger update
+    unSubscribeRef.current = subscribe(cacheKey, data => {
+      fetchInstance.setState({ data });
+    });
+  }, []);
+
+  useUnmount(() => {
+    unSubscribeRef.current?.();
+  });
+
+  if (!cacheKey) {
+    return {};
+  }
+
+  return {
+    onBefore: params => {
+      const cacheData = _getCache(cacheKey, params);
+
+      if (!cacheData || !Object.hasOwn(cacheData, 'data')) {
+        return {};
+      }
+
+      // If the data is fresh, stop request
+      if (staleTime === -1 || new Date().getTime() - cacheData.time <= staleTime) {
+        return {
+          loading: false,
+          data: cacheData?.data,
+          error: undefined,
+          returnNow: true
+        };
+      }
+      // If the data is stale, return data, and request continue
+      return {
+        data: cacheData?.data,
+        error: undefined
+      };
+    },
+    onRequest: (service, args) => {
+      let servicePromise = getCachePromise(cacheKey);
+
+      // If has servicePromise, and is not trigger by self, then use it
+      if (servicePromise && servicePromise !== currentPromiseRef.current) {
+        return { servicePromise };
+      }
+
+      servicePromise = service(...args);
+      currentPromiseRef.current = servicePromise;
+      setCachePromise(cacheKey, servicePromise);
+      return { servicePromise };
+    },
+    onSuccess: (data, params) => {
+      if (cacheKey) {
+        // cancel subscribe, avoid trgger self
+        unSubscribeRef.current?.();
+        _setCache(cacheKey, {
+          data,
+          params,
+          time: new Date().getTime()
+        });
+        // resubscribe
+        unSubscribeRef.current = subscribe(cacheKey, d => {
+          fetchInstance.setState({ data: d });
+        });
+      }
+    },
+    onMutate: data => {
+      if (cacheKey) {
+        // cancel subscribe, avoid trigger self
+        unSubscribeRef.current?.();
+        _setCache(cacheKey, {
+          data,
+          params: fetchInstance.state.params,
+          time: new Date().getTime()
+        });
+        // resubscribe
+        unSubscribeRef.current = subscribe(cacheKey, d => {
+          fetchInstance.setState({ data: d });
+        });
+      }
+    }
+  };
+};
+
+export default useCachePlugin;