Как дождаться загрузки всех данных через Promise.all() и отрендерить их?

Для дожидания загрузки всех данных и последующего их рендеринга в JavaScript можно использовать метод Promise.all(). Promise.all() принимает в качестве аргумента массив промисов и возвращает новый промис, который будет разрешен, когда все переданные промисы будут разрешены, или отклонен, если хотя бы один из них будет отклонен.

Давайте рассмотрим пример. Предположим, что у нас есть функции, которые асинхронно загружают различные данные:

function fetchData1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные 1');
    }, 2000);
  });
}

function fetchData2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные 2');
    }, 3000);
  });
}

function fetchData3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные 3');
    }, 1000);
  });
}

Теперь мы можем использовать Promise.all() для дожидания загрузки всех данных:

Promise.all([fetchData1(), fetchData2(), fetchData3()])
  .then(data => {
    // Все промисы успешно разрешены
    // data - массив с данными в соответствии с порядком промисов
    console.log(data); // ['Данные 1', 'Данные 2', 'Данные 3']

    // Здесь можно выполнить рендеринг данных
    renderData(data);
  })
  .catch(error => {
    // Один из промисов был отклонен
    console.error(error);
  });

Таким образом, мы создаем массив промисов, которые загружают данные, и передаем их в Promise.all(). Затем мы используем методы .then() и .catch() для обработки разрешения или отклонения промисов.

В блоке .then() мы получаем массив разрешенных данных и выполняем рендеринг, используя функцию renderData() (замените ее на свою собственную функцию рендеринга).

В блоке .catch() мы обрабатываем случай, когда хотя бы один из промисов был отклонен, и выводим ошибку в консоль.

Таким образом, используя Promise.all(), можно дождаться загрузки всех данных и потом выполнить рендеринг на основе полученных данных.