componentDidMount несколько вызовов выборки передовой опыт?

Question

У меня много apis, которые НЕЗАВИСИМЫ друг от друга и должны быть сохранены в состоянии React, прежде чем оно будет отображено.У меня fetch звонки на componentDidMount, но я не уверен, как лучше всего подойти к этому.Должен ли я ... 1. иметь вложенные вызовы выборки

пример:

componentDidMount() {
    fetch('url')
    .then((res) => res.json())
    .then((data) => {
        // call another fetch in here
    })

}

ИЛИ 2. иметь отдельные вызовы выборки

пример:

componentDidMount() {
    fetch('url')
    .then((res) => res.json())
    .then((data) => {
        // set state in here
    })

    // call another fetch for the other url endpoint
    fetch('url2')
    .then((res) => res.json())
    .then((data) => {
        // set state in here
    })
}

Я не уверен, считается ли один способ лучше, чем другой, но мне хотелось бы знать, что вы, ребята, думаете, и какие будут плюсы / минусы.

ОБНОВЛЕНИЕ: Я используюPromise.all () сейчас, но я получаю возвращенное обещание, а не фактическое значение.Вот мой код:

Promise.all([
  fetch(`/api/url1`),
  fetch(`/api/url2`),
])
.then(([res1, res2]) => (
  {
    res1: res1.json(),
    res2: res2.json(),
}))
.then(({res1, res2}) => {
  this.setState({
    state1: res1,
    state2: res2,
  });
})
.catch((error) => {
  console.log(error);
});

Когда я проверил значения моего состояния на консоли, вот что я получаю:

Promise
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(6530)

Любое представление о том, чего мне не хватает /не так?

Спасибо!

Answer 1

Как уже упоминалось @CertainPerformance, вы должны использовать метод Promise.all.

Promise.all([
  fetch("url1"),
  fetch("url2"),
  fetch("url3"),
]).then(([res1, res2, res3]) => {
  this.setState({status: "fetched"})
})

const url = "https://asdqwe.free.beeceptor.com/my/api/path";

const promises = Promise.all([
  fetch(url),
  fetch(url),
  fetch(url),
]);


promises
  .then((results) => 
    Promise.all(results.map(r => r.text()))
  )
  .then(console.log)

Answer 2

Поскольку fetch возвращает Promise, вы можете использовать функцию Promise.all для одновременного выполнения обеих выборок:

componentDidMount() {
    Promise.all([fetch('url'), fetch('url2')])

      .then(([res1, res2]) => { 
         return Promise.all([res1.json(), res2.json()]) 
      })
      .then(([res1, res2]) => {
        // set state in here
      });
}