Multiple API call using Async Await inside React's useEffect() Hook and get response of first api call then second api call and then third api call

Question

I want to get first response then second response and then third response in the console section but i can not achieve this. please help me to solve this problem.

this is the outputI tried to solve my problem in this way.

import './App.css';
import { useEffect } from 'react';
import axios from 'axios';
function App() {

  useEffect(() => {
    async function getDataZero() {
      const res = await axios.get(`https://pokeapi.co/api/v2/pokemon/1`);
      console.log("res-0",res)
    }

    async function getDataOne() {
      const res = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
      console.log("res-1",res)
    }

    async function getDataTwo() {
      const res = await axios.get(`https://pokeapi.co/api/v2/pokemon`);
      console.log("res-2",res)
    }

    getDataZero();
    getDataOne();
    getDataTwo();

  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <p>React app</p>
      </header>
    </div>
  );
}

export default App;

Well you're not `await`ing the promises returned by the function calls? It's just three asynchronous functions called at the same time. — Bergi, Apr 02 '23 at 18:59
Your code is fine, but you are not handling the order of the responses. In your case the third API was faster that the second and logged first. If you are interested in the order use Promise.all() and pass an array with the 3 api calls. — e.pacciani, Apr 02 '23 at 21:53
It's actually more efficient to do it the way you did, then await the results right before you need them. (Your example doesn't actually *use* the results outside of the functions, so that makes it harder to discern why you need the results separated/ordered.) — Wyck, Apr 03 '23 at 01:40

yang zhou · Answer 1 · 2023-04-03T16:09:08.937

1

you can also define a execution function in useEffect

useEffect(() => {
    ...
    async main() {
        await getDataZero() 
        await getDataOne()
        await getDataTwo()
    }
    main()
}, [])

edited Apr 03 '23 at 16:09

answered Apr 03 '23 at 01:36

yang zhou

148
6

2

You might want to add in a call to `main()` – Phil Apr 03 '23 at 01:43

Panos · Answer 2 · 2023-04-02T19:18:29.450

I have modified your code, in a way so that it will await each promise, and then move to the next.

import './App.css';
import { useEffect } from 'react';
import axios from 'axios';
function App() {

  useEffect( async () => { // <--- use async here
    async function getDataZero() {
      const res = await axios.get(`https://pokeapi.co/api/v2/pokemon/1`);
      console.log("res-0",res)
    }

    async function getDataOne() {
      const res = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
      console.log("res-1",res)
    }

    async function getDataTwo() {
      const res = await axios.get(`https://pokeapi.co/api/v2/pokemon`);
      console.log("res-2",res)
    }

   await getDataZero(); // <--- await keyword in front of each function
   await getDataOne();
   await getDataTwo();

  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <p>React app</p>
      </header>
    </div>
  );
}

export default App;

Please don't just dump code as an answer. Add commentary to explain what you have written, and how it solves the problem. Also your answer doesn't account for the fact that no data is returned from the functions. — Andy, Apr 02 '23 at 17:12
This will throw a [React error](https://stackoverflow.com/q/53332321/283366) — Phil, Apr 03 '23 at 01:42

Multiple API call using Async Await inside React's useEffect() Hook and get response of first api call then second api call and then third api call

2 Answers2