Entendendo Promises JavaScript: Um Guia Prático para Iniciantes

Entenda o que são Promises JavaScript e como criá-las, com exemplos práticos, linguagem acessível e um arquivo para praticar!

Uma Promise em JavaScript é um objeto que representa o resultado futuro de uma operação assíncrona — algo que ainda vai terminar, como uma requisição de rede. Ela tem três estados: pending (pendente), fulfilled (resolvida) e rejected (rejeitada). Você cria com new Promise((resolve, reject) => {...}) e trata o resultado com .then() (sucesso) e .catch() (erro).

Promises em JavaScript são um conceito essencial para lidar com operações assíncronas, como requisições a APIs, aprenda a usá-las de forma eficiente em seus projetos!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que são Promises e para que servem?

O que é uma Promise?
Uma Promise é um objeto que representa uma operação assíncrona, ou seja, algo que não entrega um resultado imediatamente, mas "promete" entregá-lo no futuro. Ela pode estar em três estados:

• Pending: Aguardando conclusão.
• Fulfilled: Concluída com sucesso (usa resolve).
• Rejected: Concluída com erro (usa reject).

Para que serve?
Promises são usadas para gerenciar operações que levam tempo, como carregar dados de uma API. Em vez de retornar o resultado direto, a Promise garante que você será notificado quando o resultado estiver pronto ou se ocorrer um erro.

Exemplo prático: Ao fazer uma requisição a uma API, você recebe uma Promise que será resolvida com os dados ou rejeitada com um erro.

Como Criar uma Função que Simula Carregamento de Dados?

Como simular uma Promise?
Vamos criar uma função que simula o carregamento de dados com um atraso, usando setTimeout para imitar uma operação assíncrona.

function carregarDados() {
    console.log("Estamos carregando os dados...");
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const certoErrado = true; // Simula sucesso
            if (certoErrado) {
                resolve("Deu certo no carregamento!");
            } else {
                reject("Deu erro na hora de carregar!");
            }
        }, 3000); // 3 segundos de espera
    });
}

• Explicação:
  • new Promise: Cria a Promise com dois parâmetros: resolve (sucesso) e reject (erro).
  • setTimeout: Simula um atraso de 3 segundos.
  • certoErrado: Variável para simular sucesso (true) ou erro (false).
  • resolve e reject: Retornam a mensagem correspondente.

Quando usar?
Use esse padrão para criar Promises em funções que envolvem operações assíncronas, como chamadas a APIs ou leitura de arquivos.

Como Retornar uma Promise de Forma Prática?

Como funciona o retorno de uma Promise?
Quando você chama a função carregarDados(), ela não retorna um valor direto, mas uma Promise. Para acessar o resultado, você precisa usar os métodos .then() (para sucesso) e .catch() (para erros).

carregarDados()
    .then((resposta) => console.log(resposta))
    .catch((erro) => console.log(erro));

• Código:
• Explicação:
  • .then(): Executa quando a Promise é resolvida (fulfilled), recebendo o valor do resolve.
  • .catch(): Executa quando a Promise é rejeitada (rejected), recebendo o valor do reject.

Resultado:

• Se certoErrado = true: Exibe "Deu certo no carregamento!" após 3 segundos.
• Se certoErrado = false: Exibe "Deu erro na hora de carregar!".

O que são e Como Usar Resolve e Reject?

O que são resolve e reject?

• resolve: Função chamada quando a operação assíncrona é concluída com sucesso, passando o resultado para o .then().
• reject: Função chamada quando ocorre um erro, passando o erro para o .catch().

Como usar?
No exemplo anterior, resolve e reject são usados dentro da Promise para definir o resultado:

• resolve("Deu certo no carregamento!"): Retorna a mensagem de sucesso.
• reject("Deu erro na hora de carregar!"): Retorna a mensagem de erro.

Quando usar?
Use resolve para entregar resultados bem-sucedidos e reject para sinalizar falhas em operações assíncronas.

Como Entender o JavaScript Assíncrono na Prática?

O que é JavaScript assíncrono?
JavaScript assíncrono permite que o código continue executando enquanto espera por operações demoradas, como chamadas a APIs ou temporizadores. Promises são a base para gerenciar essas operações.

• Por que usar Promises?
  Elas evitam o bloqueio do código, permitindo que você trate o resultado (ou erro) quando estiver pronto, sem travar a aplicação.
• Exemplo prático: No código acima, setTimeout simula uma espera, e a Promise garante que o resultado só seja processado após 3 segundos.

Quando usar?
Use Promises sempre que precisar lidar com operações que não retornam resultados imediatamente, como requisições HTTP ou animações.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Como Executar e Testar uma Promise Passo a Passo?

Como testar a Promise?

1. Crie uma função que retorna uma Promise (como carregarDados).
2. Chame a função e use .then() para tratar o sucesso e .catch() para tratar o erro.
3. Execute no navegador (use Live Server para rodar o arquivo HTML com o script).
4. Abra o console (F12) e observe:
   • A mensagem "Estamos carregando os dados..." aparece imediatamente.
   • Após 3 segundos, aparece o resultado (resolve ou reject Sexo reject`).

Exemplo de saída no console:

• "Estamos carregando os dados..."
• Após 3 segundos: "Deu certo no carregamento!" (ou "Deu erro na hora de carregar!" se certoErrado = false).

Como Usar o Método .then() para Tratar Sucesso?

O que faz o .then()?
O método .then() é chamado quando a Promise é resolvida com sucesso, recebendo o valor retornado por resolve.

carregarDados().then((resposta) => console.log(resposta));

Exibe "Deu certo no carregamento!" após a Promise ser resolvida.

Dica: Você pode encadear múltiplos .then() para processar respostas complexas, como veremos no próximo tópico.

Quando usar?
Use .then() para manipular o resultado de uma Promise bem-sucedida.

Como Lidar com Falhas Usando o Método .catch()?

O que faz o .catch()?
O método .catch() captura erros lançados por reject ou falhas na execução da Promise.

carregarDados().catch((erro) => console.log(erro));

Exibe "Deu erro na hora de carregar!" se certoErrado = false.

Quando usar?
Use .catch() para tratar erros de forma controlada, evitando que a aplicação quebre.

Como Aplicar Promises com fetch() e APIs Reais?

Como usar Promises com fetch?
O método fetch() faz requisições HTTP e retorna uma Promise. Você pode encadear .then() para processar a resposta e .catch() para tratar erros.

fetch('https://api.exemplo.com/dados')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((erro) => console.log("Erro ao buscar dados:", erro));

• Explicação:

• fetch() retorna uma Promise com um objeto Response.
• response.json() é outra Promise que converte a resposta em JSON.
• O segundo .then() exibe os dados JSON.
• .catch() trata erros, como falhas de conexão.

Exemplo de saída: O console exibe os dados da API (ex.: um objeto JSON com informações) ou uma mensagem abordando o erro.

Quando usar?
Use fetch com Promises para buscar dados de APIs em aplicações web, como listas de produtos ou informações de usuários.

Quando e Por que Usar Promises em Seus Projetos?

Por que usar Promises?

• Promises gerenciam operações assíncronas de forma clara e organizada.
• Evitam o "callback hell" (aninhamento excessivo de callbacks).
• Permitem encadear ações com .then() e tratar erros com .catch().

Quando usar Promises?
Use Promises em:

• Requisições a APIs (ex.: fetch).
• Operações com atraso, como animações ou temporizadores.
• Qualquer tarefa que não entrega resultados imediatamente.

Resumo das Estruturas de Promises

Perguntas frequentes

Conclusão

Promises são uma ferramenta poderosa no JavaScript para lidar com operações assíncronas, como chamadas a APIs ou temporizações. Com .then() e .catch(), você pode processar resultados e erros de forma clara, enquanto fetch permite integrar Promises a aplicações reais. Pratique criando funções com Promises e testando requições a APIs para dominar esse conceito essencial no desenvolvimento web!

Aprenda mais com nossos outros conteúdos sobre JavaScript, com guias e cursos fáceis de entender!

Caso prefira esse conteúdo no formato de vídeo-aula, assista aos vídeos abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Nesta aula, o Diego ensina Promises em JavaScript (as "promessas") do zero. Uma promise representa uma operação que vai terminar no futuro (dar certo ou errado). Ele simula um carregamento de dados com setTimeout, mostra como tratar o sucesso com .then e o erro com .catch, e como encadear promises (a própria resposta de uma requisição é uma promise que vira .json).

Neste vídeo (11 min):

• 0:00 - O que são as Promises (promessas): uma operação que vai terminar no futuro.
• 4:00 - Simular um carregamento de dados com setTimeout.
• 8:00 - Tratar o sucesso com .then e o erro com .catch.
• 10:00 - Encadear promises: a resposta de uma requisição é uma promise (.json).