Все, что вам нужно знать о Promise.all() в JavaScript

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

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

Метод Javascript Promise.all()

Promise.all() принимает итерацию промисов. Все это означает, что он может принимать все, что можно повторить, например массив. Вы не можете помещать в него объекты или отдельные промисы.

Давайте рассмотрим простой пример, в котором используются тайм-ауты:

let myPromise = () => {
    return new Promise((resolve) => {
        setTimeout(function() {
            resolve('firstPromise')
        }, 500)
    })
}

let mySecondPromise = () => {
    return new Promise((resolve) => {
        setTimeout(function() {
            resolve('secondPromise')
        }, 800)
    })
}

Здесь у нас есть два таймаута, самый длинный из которых занимает 800 мс. Мы хотим, чтобы консоль регистрировала значения каждого из них после завершения обоих.

Проще всего это сделать с помощью Promise.all():

Promise.all([ myPromise(), mySecondPromise() ]).then((data) => {
    console.log(data) // Console logs [ 'firstPromise', 'secondPromise' ]
})

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

Хотя может показаться заманчивым использовать await следующим образом:

let myPromiseFinish = await myPromise()
let mySecondPromiseFinish = await mySecondPromise()
console.log([ myPromiseFinish, mySecondPromiseFinish ])

На самом деле это менее эффективно. await заставляет обе функции выполняться одна за другой. Это означает, что при использовании await общее время, необходимое для выполнения обоих промисов, составит 1300 мс.

Promise.all() позволяет выполнять оба промиса одновременно, а это означает, что общая операция может занять около 800 мс — это очень полезно знать, если вы хотите оптимизировать свой код. .

Расширение результатов промисов с помощью Promise.all()

Поскольку Promise.all() возвращает массив результатов, а также создает новое обещание, мы можем использовать await с Promise.all() и запишите его вывод следующим образом:

let [ myPromiseResult, mySecondPromiseResult ] = await Promise.all([ myPromise(), mySecondPromise() ])

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

Отказ от обещания

Важно отметить, что если ваше промис срабатывает reject вместо resolve, Promise.all() немедленно reject< /код> тоже. Если вы не знакомы с отклонениями обещаний, то сейчас самое время использовать функцию reject вместо функции resolve.

Ниже обещание всегда будет отклонено и выдаст ошибку Uncaught firstPromise:

let myPromise = () => {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            reject('firstPromise')
        }, 500)
    })
}

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

Заключение

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

Также опубликовано здесь