React 中自定义钩子的异步调用

Question

async 调用和我在 React 中的自定义钩子有问题。

我需要从同一个自定义钩子中调用一系列 fetch，但它不尊重等待链。

我有一些按钮可以像这样工作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 hook 中尝试 Promise.all 。每次 fetch 都会返回一个 promise

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

这样行吗。