Question

我在async调用和我在React中的自定义钩子方面遇到了问题。

我需要从相同的自定义钩子调用一系列访存，但它不遵守等待链。

我有一些可以像onClick一样工作的按钮：

buttonDelete={() => deleteAssignedOpp(opportunity.id)}

async function deleteAssignedOpp(id) {
    await doFetch(`/opportuniy/assigned/${id}`, "DELETE");
    await doFetch("/opportuniy/assigned/list", "GET", "IN_PROGRESS");
  }

这些按钮正在调用自定义钩子，如下所示：

（我从在线教程中获得了一些代码）

function useFetch() {
  const [url, setUrl] = useState("");
  const [obj, setObj] = useState("");
  const [method, setMethod] = useState("GET");
  const [body, setBody] = useState();
  const [state, dispatch] = useStateValue();

  useEffect(() => {
    let didCancel = false;
    if (url) {
      const fetchData = async () => {
        dispatch({
          type: `FETCH_${obj}_INIT`
        });
        try {
          const response = await fetch(
            `https://myapiAddress${url}`,
            {
              method: method,
              //body: body,
              headers: new Headers({
                Authorization: myFunctionForAuthorization
              })
            }
          );
          const result = await response.json();
          if (!didCancel) {
            dispatch({
              type: `FETCH_${obj}_SUCCESS`,
              payload: result
            });
          }
        } catch (error) {
          if (!didCancel) {
            dispatch({
              type: `FETCH_${obj}_ERROR`,
              payload: { error }
            });
          }
        }
      };

      fetchData();

      return () => {
        didCancel = true;
      };
    }
  }, [method, body]);

  const doFetch = (url, method, obj, body = "") => {
    setUrl(url); 
    setObj(obj); 
    setMethod(method);
    setBody(body); 
  };

  return [doFetch];
}

export default useFetch;

我希望以与按钮async/await功能相同的顺序调用自定义钩子。

非常感谢。

Answer 1

您可以在useEffects挂钩中尝试Promise.all。每次抓取都会返回一个诺言

Promise.all([api1,api2]).then(function(values){
   console.log(values)
});

那行得通。

在React中自定义钩子的ASYNC调用

1 个答案: