JS. Async. Promise.All

🧱 Суть

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

Главная идея:

несколько Promise → Promise.all → один общий результат

📦 Проблема

1. Последовательное выполнение медленнее

Такой код:

const user = await fetchUser();
const posts = await fetchPosts();
const settings = await fetchSettings();

выполняет запросы по очереди:

user → posts → settings

Каждый следующий запрос ждёт предыдущий.

2. Не всегда нужно ждать предыдущий запрос

Если данные независимы друг от друга, их можно загрузить одновременно.

✅ Решение

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

💻 Код

Обычный вариант:

const results = await Promise.all([
  fetch('/user.json'),
  fetch('/settings.json'),
  fetch('/posts.json'),
]);

Результат:

results = [
  Response,
  Response,
  Response
]

Практический пример

Получение готовых данных:

async function fetchAll() {
  try {
    const [user, settings, posts] = await Promise.all([
      fetch('/user.json').then(r => r.json()),
      fetch('/settings.json').then(r => r.json()),
      fetch('/posts.json').then(r => r.json()),
    ]);
 
    console.log(user, settings, posts);
  } catch (error) {
    console.error(error);
  }
}

Последовательно vs параллельно

Последовательно

const user = await fetch('/user.json').then(r => r.json());
const settings = await fetch('/settings.json').then(r => r.json());
const posts = await fetch('/posts.json').then(r => r.json());

Выполнение:

fetch user
      ↓
fetch settings
      ↓
fetch posts

Параллельно

const [user, settings, posts] = await Promise.all([
  fetch('/user.json').then(r => r.json()),
  fetch('/settings.json').then(r => r.json()),
  fetch('/posts.json').then(r => r.json()),
]);

Выполнение:

fetch user
fetch settings
fetch posts
        ↓
  дождались всех

Особенности Promise.all

Особенность	Что происходит
Выполняет параллельно	Все Promise запускаются одновременно
Возвращает массив	Порядок соответствует исходному массиву
Ошибка одного Promise	Весь `Promise.all` завершается с ошибкой

Если одна ошибка не должна ломать всё

Используют:

Promise.allSettled()

Пример:

const results = await Promise.allSettled([
  fetch('/user.json'),
  fetch('/settings.json'),
  fetch('/posts.json'),
]);
 
results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log(result.value);
  } else {
    console.log(result.reason);
  }
});

Разница:

Promise.all
↓
одна ошибка = вся операция ошибка
 
Promise.allSettled
↓
каждый результат обрабатывается отдельно

🎯 Вывод

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

LETUNOFF DOCS

Навигация