React中自定义钩子的ASYNC调用

Question

I have got a problem with async calls and my custom hook in React.

I need to call a series of fetch from the same custom hook, but it's not respecting the await chain.

I've some buttons that work onClick like this:

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

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

Those buttons are calling a custom hook, like this:

(I got some of this code from online tutorials)

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;

I expect the custom hook to be called in the same order of button async/await function.

Thanks a lot.

Answer 1

You could try Promise.all in your useEffects hook . Each fetch will return a promise

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

Would that work.