Explicação das promessas de JavaScript: guia completo com exemplos

Introdução às Promessas em JavaScript

As promessas em JavaScript desempenham um papel crucial na gestão de código assíncrono, permitindo que os desenvolvedores evitem o famoso “inferno de callback”. Dessa forma, é possível escrever um código mais organizado e compreensível. A seguir, abordaremos a criação e o uso de promessas com exemplos práticos.

Criando uma Nova Promessa em JavaScript

Para iniciar uma promessa, utilize o construtor Promise. É importante que você forneça uma função executora com parâmetros para resolução e rejeição.

const minhaPromessa = new Promise((resolver, rejeitar) => { // operação assíncrona if (sucesso) resolver('Dados carregados'); else rejeitar('Erro ocorrido'); });

Essa estrutura básica permite encapsular qualquer tarefa assíncrona, como chamadas de API ou temporizadores, dentro de uma promessa. Além disso, é recomendável adicionar logs no executor para monitorar o fluxo de execução durante o desenvolvimento. Sempre valide as entradas antes de decidir entre resolver ou rejeitar, garantindo a integridade dos dados nas promessas JavaScript.

Os Três Estados das Promessas em JavaScript

Uma promessa em JavaScript pode estar em um dos três estados: pendente, cumprida ou rejeitada. Inicialmente, uma promessa se encontra no estado pendente. Quando a função de resolução é chamada, ela se torna cumprida. Por outro lado, chamar a função de rejeição a torna rejeitada. Uma vez definido, o estado da promessa não pode ser alterado. Monitorar essas transições de estado é fundamental para otimizar o desempenho em aplicativos que dependem de promessas JavaScript.

Consumindo Promessas com then e catch

Utilize o método .then() para lidar com promessas que foram cumpridas. Em contrapartida, o método .catch() é responsável por gerenciar rejeições.

minhaPromessa.then(resultado => console.log(resultado)).catch(error => console.error(error));

Você pode encadear múltiplas chamadas .then() para executar operações sequenciais. Cada .then() retorna uma nova promessa, permitindo a criação de fluxos de trabalho complexos. Passe transformações de dados nas funções de retorno do .then para processar os resultados imediatamente.

Adicionando finally para Limpeza

O método .finally() é executado independentemente do resultado da promessa. Isso é ideal para tarefas de limpeza, como ocultar carregadores.

minhaPromessa.finally(() => console.log('Operação concluída'));

Dessa forma, você garante que o código seja executado após a finalização da promessa em JavaScript.

Encadeamento de Promessas para Tarefas Sequenciais

O encadeamento permite que você execute tarefas de forma sequencial. Os valores retornados de uma chamada .then() são passados para a próxima.

fetchData().then(dados => processData(dados)).then(processado => saveData(processado)).catch(handleError);

Esse padrão mantém o código legível ao lidar com várias etapas assíncronas nas promessas JavaScript. Além disso, você pode dividir longas cadeias em funções nomeadas para aprimorar a manutenção.

Tratamento de Erros em Cadeias de Promessas

Coloque .catch() no final da cadeia para capturar erros que possam ocorrer em qualquer ponto. Para um tratamento mais específico, adicione .catch() após etapas individuais. O gerenciamento adequado de erros é essencial para evitar avisos de rejeição não tratados em navegadores modernos. Além disso, lance erros personalizados dentro de .then() para propagar motivos de falha específicos.

Usando Promise.all para Execução Paralela

Promise.all aceita um array de promessas e resolve quando todas são bem-sucedidas. Contudo, ele rejeita se alguma falhar.

Promise.all([promise1, promise2, promise3]).then(resultados => console.log(resultados));

Esse método é útil para operações simultâneas, melhorando o desempenho. Lide com falhas parciais agrupando cada promessa individualmente antes de passá-las para Promise.all.

Promise.race e Suas Aplicações

Promise.race é resolvido ou rejeitado assim que a primeira promessa é finalizada. Isso é útil para implementar tempos limite.

const timeout = new Promise((_, rejeitar) => setTimeout(rejeitar, 5000)); Promise.race([fetchData(), timeout]).catch(() => console.log('Tempo esgotado'));

Combine com lógica de fallback para garantir uma degradação elegante.

Promise.allSettled para Resultados Mistos

Esse método aguarda que todas as promessas sejam finalizadas, retornando o status e o valor ou motivo de cada uma.

Promise.allSettled([p1, p2]).then(console.log);

Ele fornece uma visão completa, diferentemente do Promise.all.

Promise.any para o Primeiro Cumprimento

Promise.any resolve com a primeira promessa cumprida, ignorando as rejeições, a menos que todas falhem. Essa abordagem é útil quando várias fontes podem fornecer os mesmos dados.

Combinando async/await com Promessas

Funções assíncronas retornam promessas implicitamente. Utilize await para pausar a execução até que uma promessa seja resolvida.

async function loadData() { try { const data = await fetchData(); console.log(data); } catch (e) { console.error(e); } }

Essa sintaxe torna as promessas JavaScript mais fáceis de ler e manter. Você pode aguardar várias promessas sequencialmente ou em paralelo utilizando Promise.all dentro de funções assíncronas.

Exemplo do Mundo Real com API Fetch

A API Fetch retorna uma promessa. Utilize métodos encadeados para lidar com as respostas.

fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(err => console.error(err));

Adicione cabeçalhos e opções de corpo para solicitações POST para expandir a funcionalidade.

Melhores Práticas para Promessas de JavaScript

É fundamental sempre lidar com rejeições para evitar falhas silenciosas. Utilize async/await para facilitar a leitura sempre que possível. Evite misturar callbacks e promessas. Teste cenários extremos, como falhas de rede. Mantenha as cadeias curtas e as funções focadas para facilitar a depuração. Além disso, aproveite ferramentas como bibliotecas de inspeção de promessas durante o desenvolvimento.

Perguntas Frequentes

O que são promessas em JavaScript?

As promessas em JavaScript são objetos que representam a eventual conclusão ou falha de uma operação assíncrona, permitindo um gerenciamento mais eficiente do fluxo de execução.

Como criar uma promessa em JavaScript?

Para criar uma promessa, utilize o construtor Promise e forneça uma função executora que define como a promessa deve ser resolvida ou rejeitada.

Qual a diferença entre Promise.all e Promise.race?

Promise.all resolve quando todas as promessas são cumpridas, enquanto Promise.race resolve assim que a primeira promessa é cumprida ou rejeitada.

Quando usar async/await?

Utilize async/await para tornar o código assíncrono mais legível e fácil de manter, especialmente quando você precisa lidar com várias promessas sequencialmente.