[HOOK]useAsync

平常经常遇到这样的需求：
进入页面发送异步请求，展示Loading, 拿到响应后，正常的话设置到状态，如果发生异常则提示，最后关闭loading效果。

因此我们经常需要定义并管理三个状态，并且这套逻辑在项目中是广泛存在的，比如表格页面的例子：

因此，可以使用一个自定义HOOK将这部分逻辑抽离出来：

import { useEffect, useState, useCallback } from "react";

const useAsync = (asyncFunc, immediate = false) => {
  const [isLoading, setIsLoading] = useState(false);
  const [res, setRes] = useState();
  const [error, setError] = useState();

  const query = useCallback(
    (params) => {
      setIsLoading(true);
      setRes(undefined);
      setError(undefined);

      return asyncFunc(params)
        .then((response) => {
          setRes(response);
        })
        .catch((error) => {
          setError(error);
        })
        .finally(() => {
          setIsLoading(false);
        });
    },
    [asyncFunc]
  );

  useEffect(() => {
    if (immediate) query();
  }, []);

  return { query, isLoading, res, error };
};

export default useAsync;

这个Hook暴露出来的query, isLoading, res, error可以供宿主组件直接使用，宿主组件不用再关心具体的细节。