Entendendo Promise.all e como utilizá-la em JavaScript

O que é Promise.all e como usá-la?

Quando estamos lidando com múltiplas operações assíncronas no JavaScript, muitas vezes precisamos esperar que todas as Promises sejam resolvidas antes de seguir com a execução do código. É aí que o Promise.all() entra em cena. Ele é uma função muito útil que permite executar várias Promises em paralelo e esperar por todos os resultados de forma eficiente, sem bloquear a execução do código.

Como funciona o Promise.all()?

O Promise.all() é uma função que recebe um array de Promises e retorna uma nova Promise. Essa nova Promise será resolvida quando todas as Promises no array forem resolvidas, ou será rejeitada assim que uma das Promises for rejeitada. Em outras palavras, Promise.all() aguarda que todas as Promises no array sejam concluídas antes de seguir com o fluxo do programa.

Exemplo básico de uso de Promise.all():

let promise1 = fetch('https://api.exemplo1.com');
let promise2 = fetch('https://api.exemplo2.com');

Promise.all([promise1, promise2])
  .then(responses => {
    return Promise.all(responses.map(response => response.json()));
  })
  .then(data => console.log(data))
  .catch(error => console.log('Erro:', error));

Neste exemplo, o Promise.all() recebe um array contendo duas Promises. O código aguarda que ambas as Promises sejam resolvidas. Quando isso acontece, ele usa response.json() para transformar as respostas em objetos JSON e, em seguida, imprime os dados no console. Se qualquer uma das Promises falhar, o erro será capturado pelo catch().

Quando usar Promise.all()?

Você deve usar Promise.all() quando precisar esperar pela conclusão de múltiplas Promises que podem ser executadas em paralelo. Isso é útil, por exemplo, quando você precisa fazer várias requisições a APIs e aguardar que todas sejam concluídas antes de prosseguir com o código.

Exemplo de uso do Promise.all() com múltiplas requisições:

let fetch1 = fetch('https://api.exemplo1.com');
let fetch2 = fetch('https://api.exemplo2.com');
let fetch3 = fetch('https://api.exemplo3.com');

Promise.all([fetch1, fetch2, fetch3])
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Erro:', error);
  });

Aqui, estamos fazendo três requisições em paralelo. O Promise.all() aguarda que todas as três Promises sejam resolvidas antes de continuar a execução, e qualquer erro em uma das Promises será capturado pelo catch().

Comportamento de rejeição em Promise.all()

Uma característica importante de Promise.all() é que, se uma das Promises no array for rejeitada, a Promise retornada por Promise.all() será imediatamente rejeitada, e os resultados das outras Promises serão ignorados. Isso significa que, se uma Promise falhar, você não obterá os resultados das outras Promises, a menos que trate as falhas de forma adequada.

Exemplo de rejeição em Promise.all():

let promise1 = Promise.resolve('Sucesso 1');
let promise2 = Promise.reject('Erro 2');
let promise3 = Promise.resolve('Sucesso 3');

Promise.all([promise1, promise2, promise3])
  .then(data => console.log(data))
  .catch(error => console.log('Erro:', error));

Neste exemplo, o promise2 será rejeitado, e o Promise.all() será imediatamente rejeitado, ignorando os resultados das outras Promises, mesmo que elas tenham sido resolvidas com sucesso.

Como usar Promise.all() com async/await?

Embora o Promise.all() seja frequentemente usado com .then(), ele também pode ser utilizado com async/await, o que torna o código mais legível e fácil de entender.

Exemplo de como usar Promise.all() com async/await:

async function obterDados() {
  try {
    let [dados1, dados2, dados3] = await Promise.all([
      fetch('https://api.exemplo1.com').then(res => res.json()),
      fetch('https://api.exemplo2.com').then(res => res.json()),
      fetch('https://api.exemplo3.com').then(res => res.json())
    ]);
    console.log(dados1, dados2, dados3);
  } catch (error) {
    console.log('Erro:', error);
  }
}

obterDados();

Aqui, o await aguarda que todas as Promises sejam resolvidas ao mesmo tempo e as respostas são armazenadas em dados1, dados2 e dados3. O código continua a execução assim que todas as Promises forem resolvidas.

Conclusão

O Promise.all() é uma função essencial para trabalhar com múltiplas Promises em JavaScript, permitindo que você execute várias tarefas em paralelo e aguarde que todas sejam concluídas antes de seguir com o código. Ao usar Promise.all(), você pode otimizar a execução assíncrona e melhorar a performance da sua aplicação, especialmente quando precisar aguardar por múltiplos resultados simultaneamente.

Por que usar Promise.all() para otimizar o código assíncrono?

Quando você lida com várias operações assíncronas que podem ser executadas em paralelo, Promise.all() é uma ferramenta essencial. Ela permite que você execute todas as operações ao mesmo tempo e aguarde que todas sejam concluídas antes de avançar para o próximo passo. Isso é útil especialmente em casos como requisições simultâneas a APIs ou execução de tarefas independentes.

Algumas aplicações:

• Fazer múltiplas requisições a APIs ao mesmo tempo, sem ter que esperar uma ser concluída antes da próxima.
• Trabalhar com tarefas assíncronas que podem ser executadas de forma paralela, como processamentos independentes de dados.
• Otimizar a execução de código que depende de múltiplos resultados assíncronos, como a atualização de dados em tempo real.

Dicas para quem está começando

• Quando começar a usar Promise.all(), pratique com exemplos simples, como fazer múltiplas requisições a APIs e esperar todos os resultados ao mesmo tempo.
• Tenha em mente que se uma Promise falhar, o Promise.all() será rejeitado, então é importante tratar erros adequadamente.
• Use async/await para tornar o código mais legível quando estiver trabalhando com múltiplas Promises em paralelo.
• Experimente usar Promise.all() para melhorar o tempo de resposta e a performance de suas aplicações, especialmente quando você tiver várias tarefas assíncronas para executar ao mesmo tempo.

Compartilhe este tutorial