Как реализовать параллельные HTTP-запросы к нескольким сервисам?

В современных веб-приложениях часто требуется получать данные из нескольких независимых источников (например, API пользователя, API новостей и API погоды). Выполнение этих запросов последовательно создаёт ненужные задержки, так как каждый запрос ждёт окончания предыдущего. Параллельное выполнение позволяет отправить все запросы почти одновременно и обработать результаты, когда они все будут готовы, что сокращает общее время ожидания.

Основной подход: Promise.all

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

async function fetchMultipleUrls(urls) {
  // Создаём массив промисов-запросов
  const fetchPromises = urls.map(url => fetch(url));

  try {
    // Запускаем все запросы параллельно и ждём результаты
    const responses = await Promise.all(fetchPromises);
    // Декодируем тела ответов (также параллельно)
    const data = await Promise.all(
      responses.map(response => response.json())
    );
    return data;
  } catch (error) {
    console.error('Один из запросов завершился ошибкой:', error);
    throw error;
  }
}

// Использование
const apiEndpoints = [
  'https://api.example.com/users/1',
  'https://api.example.com/posts',
  'https://api.example.com/weather'
];

fetchMultipleUrls(apiEndpoints).then(results => {
  console.log('Все данные получены:', results);
});

Альтернативы для обработки ошибок

Если важно получить результаты даже для частично неудачных запросов, используйте Promise.allSettled(). Он всегда завершается успешно, возвращая массив объектов с статусом (fulfilled или rejected) и значением или причиной ошибки.

const promises = [
  fetch('https://api.example.com/good'),
  fetch('https://api.example.com/bad-endpoint'), // Может вернуть 404
  fetch('https://api.example.com/another')
];

const results = await Promise.allSettled(promises);
const successfulData = results
  .filter(result => result.status === 'fulfilled')
  .map(result => result.value);

Где это применяется?

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

Вывод: Используйте Promise.all() для параллельного выполнения независимых HTTP-запросов, когда нужны результаты всех операций и ошибка в одном из них должна прервать весь процесс. Если требуется более устойчивая обработка с сохранением частичных результатов, выбирайте Promise.allSettled(). Этот подход является фундаментальным для создания отзывчивых и быстрых веб-приложений.