Как получить результаты нескольких параллельных асинхронных запросов?

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

Promise.all()

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

Пример использования с fetch

Представим, что нам нужно получить данные о пользователе и его постах с JSONPlaceholder API.

async function fetchUserAndPosts(userId) {
  const userPromise = fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  const postsPromise = fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);

  try {
    // Оба запроса запускаются параллельно
    const [userResponse, postsResponse] = await Promise.all([userPromise, postsPromise]);

    const user = await userResponse.json();
    const posts = await postsPromise.json();

    console.log('User:', user.name);
    console.log('Number of posts:', posts.length);
    return { user, posts };
  } catch (error) {
    console.error('One of the requests failed:', error);
  }
}

fetchUserAndPosts(1);

Альтернативные методы

Иногда требуется более гибкое управление:

• Promise.allSettled(): Ждёт завершения всех промисов, независимо от их статуса (успех или ошибка). Возвращает массив объектов с результатами каждого промиса, что полезно для анализа частично неудачных операций.
• Promise.race(): Возвращает промис, который разрешается или отклоняется с результатом первого завершившегося промиса из переданных.
• Promise.any(): Возвращает промис, который разрешается с результатом первого успешно выполнившегося промиса. Отклоняется, только если все промисы отклонены.

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

Параллельные запросы критически важны для оптимизации производительности фронтенда. Они используются при:

• Загрузке данных для разных частей страницы (профиль пользователя, лента новостей, уведомления).
• Отправке нескольких аналитических событий.
• Проверке доступности нескольких сервисов (health check).
• Агрегации данных из нескольких источников API.

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