Найти тему
WebForMySelf

Как использовать Promise.all()

Оглавление

Источник: WebForMyself.com

Говоря простыми словами, промисы — это плейсхолдер для значения, которое будет доступно когда-нибудь позже. Промисы полезны при обработке асинхронных операций.

JavaScript предоставляет вспомогательную функцию Promise.all(promisesArrayOrIterable) для одновременной, параллельной обработки нескольких промисов и получения результатов в одном агрегированном массиве. Посмотрим, как это работает.

Promise.all()

Promise.all() — это встроенный хэлпер, который принимает массив промисов (или, как правило, итерацию).

Затем вы можете извлечь значения промисов, используя синтаксис then-able:

или синтаксис async/await:

Интересная часть заключается в том, как промис, возвращаемый функцией Promise.all(), разрешается или отклоняется. Если все промисы разрешены успешно, allPromise выполняется с массивом, содержащим выполненные значения отдельных промисов. Порядок промисов в массиве имеет значение — вы получите значения именно в этом порядке.

-2

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

-3

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

Пример: все промисы выполнены.

Чтобы изучить, как работает Promise.all(), я собираюсь использовать 2 функции — resolveTimeout(value, delay) и rejectTimeout(reason, delay).

resolveTimeout(value, delay) возвращает промис, который выполняется по прошествии времени delay.

С другой стороны, rejectTimeout(reason, delay) возвращает промис, который отклоняется по причине reason (обычно с ошибкой) по прошествии времени delay.

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

Попробуйте демо.

const allPromise = Promise.all([...]) возвращает новый allPromise.

Затем оператор const lists = await allPromise ожидает 1 секунду, пока не будет выполнен allPromise, содержащий значения выполнения первого и второго промисов.

Наконец, lists содержит агрегированный результат: [['potatoes', 'tomatoes'], ['oranges', 'apples']].

Порядок массива промисов напрямую влияет на порядок результатов. Промис из овощей это первый элемент, а промис из фруктов — второй элемент в массиве: Promise.all([vegetablesPromise, fruitsPromise]). Массив результатов содержит значения в том же порядке — первый список овощей и второй список фруктов.

Пример: один промис отклоняется.

А теперь представьте ситуацию, когда в магазине закончились фрукты. В таком случае давайте откажемся от промиса фруктов с ошибкой new Error(‘Out of fruits!’):

Попробуйте демо.

В сценарии allPromise = Promise.all([...]), как обычно, возвращается промис.

Однако по прошествии 1 секунды второй промис(фрукты) отклоняется с ошибкой new Error(‘Out of fruits!’). Это приведет к отказу new Error(‘Out of fruits!’).

Даже если промисы по овощам были выполнены, Promise.all() это не принимает во внимание.

Такое поведение Promise.all([...]) называется отказоустойчивым. Если хотя бы один промис в массиве отклоняется, то результат, возвращенный allPromise = Promise.all([...]) также отклоняется — по той же причине.

Вывод

Promise.all([...]) — полезная вспомогательная функция, которая позволяет выполнять асинхронные операции параллельно, используя стратегию безотказной работы, и объединять результаты в массив.

Читайте нас в Telegram, VK

Автор: Dmitri Pavlutin

Источник: dmitripavlutin.com