fetch data from multiple apis with async await

Question

Async/await has come in handy when fetching data asynchronously, especially in the

async componentDidMount() {
    try {
       const response = await axios.get(endpoints.one)
       const data = await response
       this.setState({ data, isLoading: false })
    } catch (e) {
       this.setState({ errors: e.response })
    }

}

Moreover, when fetching from multiple endpoints, one can easily use

Promise.all([
  fetch(endpoints.one),
  fetch(endpoints.two),
]).then(([data1, data2]) => {
  console.log(data1, data2)
}).catch((err) => {
  console.log(err);
});

However, how can one use aync/await to fetch data from multiples sources instead of Promise.all?

some answers from here provide solutions without Promise.all: stackoverflow.com/questions/35612428/… — Andrey
– Andrey, Commented May 15, 2019 at 15:46

Nicholas Tower · Accepted Answer · 2019-05-15 15:45:54Z

13

If you want to do them in parallel, then you'll still Promise.all. Just you'll await the result rather than calling .then

async someFunction() {
  try {
    const [data1, data2] = await Promise.all([
      fetch(endpoints.one),
      fetch(endpoints.two),
    ]);
    console.log(data1, data2);
  } catch (err) {
    console.log(err);
  }
}

answered May 15, 2019 at 15:45

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Erick Mwazonga Over a year ago

A good idea, however when you are doing it the componentDidMount.... async componentDidMount() { someFunction() } you do not get data in the response

Nicholas Tower Over a year ago

Are you referring to the fact that i didn't have a return statement in my example?

0xdeadbeef Over a year ago

@ErickMwazonga what do you mean by "you do not get data in the response"? are you just referring to the missing this.setState in his answer? or something else?

Collectives™ on Stack Overflow

fetch data from multiple apis with async await

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related