Promise.all in useEffect hook in React

January 12, 2022

I’m dealing with a use case where two API calls are made one after the other. The second API call is made by taking a value from the first API call response. I was able to use Promise.all with axios in my React application.

Is there a better way to call the APIs in chain in useEffect hook? I’m open to suggestions or recommendations. Could anyone please help?

 useEffect(async () => {
    const getFirstResponse = async () => {
      try {
        return await axios.get('http://first-api', {
          params: { carId: id },
        });
      } catch (error) {
        return error;
      }
    };

    const firstResponse = await getFirstResponse();

    const getSecondResponse = async () => {
      try {
        return await axios.get('http://second-api', {
          params: { carName: firstResponse.data?.carName },
        });
      } catch (error) {
        return error;
      }
    };

    const secondResponse = await getSecondResponse();

    Promise.all([firstResponse, secondResponse])
      .then(function (values) {
        console.log(`values`, values);
      })
      .catch(function (err) {
        console.log(err);
      });

  }, []);

>Solution :

Promise.all is completely superfluous here.

It is a tool for handling promises that are running in parallel not in series.

The argument you pass to it should be an array of promises. firstResponse and secondResponse are the values that have been unwrapped from promises by await.

Just use firstResponse and secondResponse directly.

const secondResponse = await getSecondResponse();
console.log([firstResponse, secondResponse]);

For that matter, creating the nested async functions and having multiple try/catch blocks that do the same thing just makes the code harder to read.

You can reduce the whole thing down to:

useEffect(() => {
    const asyncFunction = async () => {
        try {
            const firstResponse = await axios.get('http://first-api', {
                params: { carId: id },
            });
            const secondResponse = await axios.get('http://second-api', {
                params: { carName: firstResponse.data?.carName },
            });
            console.log(`values`, [firstResponse, secondResponse]);
        } catch (error) {
            return error;
        }
      }
    asyncFunction();
}, []);