Function useFetch

web/packages/shared/hooks/useFetch.ts:76–130

(
  fetchApi: FetchApi<ApiArgs>,
  apiArgs: ApiArgs,
  options: UseFetchOptions = {},
)

 * @returns [state, reload]
 */
const useFetch = <ApiArgs extends any[]>(
  fetchApi: FetchApi<ApiArgs>,
  apiArgs: ApiArgs,
  options: UseFetchOptions = {},
): [State, () => void] => {
  const { initData = null, onPreHandler, onSuccess, onFail, onFinally } = options;
  const [state, dispatch] = useReducer(fetchReducer, {
    isLoading: false,
    isError: false,
    error: '',
    data: initData,
  });

  // 用于刷新请求
  const [refresh, setRefresh] = useState<boolean>(false);
  const reload = () => setRefresh(!refresh);

  useDeepEffect(() => {
    // 组件销毁时 abort 数据
    let didCancel = false;
    const fetchData = async () => {
      // 当请求中时，避免多次请求
      if (state.isLoading) return;
      // 前置处理
      onPreHandler?.();
      // fetch init
      dispatch({ type: 'FETCH_INIT' });
      try {
        const res = await fetchApi(...apiArgs);
        // 当组件销毁时，将isLoading，isError置为false
        if (didCancel) {
          dispatch({ type: 'FETCH_CANCEL' });
          return;
        }
        dispatch({ type: 'FETCH_SUCCESS', payload: res });
        onSuccess?.(res);
      } catch (error) {
        if (didCancel) {
          dispatch({ type: 'FETCH_CANCEL' });
          return;
        }
        dispatch({ type: 'FETCH_FAILURE', payload: error });
        onFail?.(error);
      } finally {
        onFinally?.();
      }
    };
    fetchData();
    return () => {
      didCancel = true;
    };
  }, [apiArgs, refresh]);

  return [state, reload];
};

export default useFetch;