Promessa JavaScript.all()

Resumo : neste tutorial, você aprenderá como usar o Promise.all()método estático para agregar resultados de múltiplas operações assíncronas.

Introdução ao método JavaScript Promise.all()

O Promise.all()método estático leva um iterável de promessas :

Promise.all(iterable);Linguagem de código:  JavaScript  ( javascript )

O Promise.all()método retorna uma única promessa que é resolvida quando todas as promessas de entrada forem resolvidas. A promessa retornada é resolvida para uma matriz dos resultados das promessas de entrada:

Neste diagrama, o promise1resolve para um valor v1em t1e o promise2resolve para um valor v2em t2. Conseqüentemente, the Promise.all(promise1, promise2)retorna uma promessa que resolve um array contendo os resultados de the promise1e promise2 [v1, v2]at t2.

Em outras palavras, Promise.all()espera que todas as promessas de entrada sejam resolvidas e retorna uma nova promessa que resolve para um array contendo os resultados das promessas de entrada.

Se uma das promessas de entrada for rejeitada, o Promise.all()método retorna imediatamente uma promessa que é rejeitada com um erro da primeira promessa rejeitada:

Neste diagrama, as promise2rejeições em t1com um error. Portanto, Promise.all()retorna uma nova promessa que é imediatamente rejeitada com o mesmo erro. Além disso, Promise.all()não se importa com outras promessas de entrada, se serão resolvidas ou rejeitadas.

Na prática, Promise.all()é útil agregar os resultados de múltiplas operações assíncronas.

Exemplos de métodos JavaScript Promise.all()

Vejamos alguns exemplos para entender como o Promise.all()método funciona.

1) Exemplo de promessas resolvidas

As promessas a seguir são resolvidas para 10, 20 e 30 após 1, 2 e 3 segundos. Usamos o setTimeout()para simular as operações assíncronas:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The first promise has resolved');
    resolve(10);
  }, 1 * 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The second promise has resolved');
    resolve(20);
  }, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The third promise has resolved');
    resolve(30);
  }, 3 * 1000);
});

Promise.all([p1, p2, p3]).then((results) => {
  const total = results.reduce((p, c) => p + c);

  console.log(`Results: ${results}`);
  console.log(`Total: ${total}`);
});
Linguagem de código:  JavaScript  ( javascript )

Saída

The first promise has resolved
The second promise has resolved
The third promise has resolved
Results: 10,20,30
Total: 60

Quando todas as promessas forem resolvidas, os valores dessas promessas serão passados ​​para o retorno de chamada do then()método como um array.

Dentro do retorno de chamada, usamos o reduce()método Array para calcular o valor total e usamos o console.logpara exibir o array de valores, bem como o total.

2) Exemplo de promessas rejeitadas

O Promise.all()retorna uma promessa que será rejeitada se alguma das promessas de entrada for rejeitada.

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The first promise has resolved');
        resolve(10);
    }, 1 * 1000);

});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The second promise has rejected');
        reject('Failed');
    }, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The third promise has resolved');
        resolve(30);
    }, 3 * 1000);
});


Promise.all([p1, p2, p3])
    .then(console.log) // never execute
    .catch(console.log);
Linguagem de código:  JavaScript  ( javascript )

Saída:

The first promise has resolved
The second promise has rejected
Failed
The third promise has resolved

Neste exemplo, temos três promessas: a primeira é resolvida após 1 segundo, a segunda é rejeitada após 2 segundos e a terceira é resolvida após 3 segundos.

Como resultado, a promessa retornada é rejeitada porque a segunda promessa foi rejeitada. O catch()método é executado para exibir o motivo da promessa rejeitada.

Resumo

• O Promise.all()método aceita uma lista de promessas e retorna uma nova promessa que resolve uma matriz de resultados das promessas de entrada se todas as promessas de entrada forem resolvidas ou rejeitadas com um erro da primeira promessa rejeitada.
• Use o Promise.all()método para agregar resultados de diversas operações assíncronas.