Guia Completo de Promises

Promises são a base do JavaScript assíncrono moderno. Elas fornecem uma maneira mais limpa de lidar com operações assíncronas em comparação com callbacks.

O que é uma Promise?

Uma Promise representa a conclusão (ou falha) eventual de uma operação assíncrona:

const promise = new Promise((resolve, reject) => {
  // Operação assíncrona
  setTimeout(() => {
    const sucesso = true;
    if (sucesso) {
      resolve('Operação concluída com sucesso!');
    } else {
      reject(new Error('Operação falhou'));
    }
  }, 1000);
});

Estados de uma Promise

Uma promise pode estar em um de três estados:

1. Pendente: Estado inicial, nem cumprida nem rejeitada
2. Cumprida: Operação concluída com sucesso
3. Rejeitada: Operação falhou

Usando Promises

then() e catch()

promise
  .then(resultado => {
    console.log(resultado); // "Operação concluída com sucesso!"
  })
  .catch(erro => {
    console.error(erro);
  });

Encadeando Promises

fetch('/api/usuario')
  .then(resposta => resposta.json())
  .then(usuario => fetch(`/api/posts/${usuario.id}`))
  .then(resposta => resposta.json())
  .then(posts => {
    console.log('Posts do usuário:', posts);
  })
  .catch(erro => {
    console.error('Erro:', erro);
  });

Métodos Utilitários de Promise

Promise.all()

Aguarde todas as promises serem resolvidas:

const promises = [fetch('/api/usuarios'), fetch('/api/posts'), fetch('/api/comentarios')];

Promise.all(promises)
  .then(respostas => {
    // Todas as requisições foram concluídas
    return Promise.all(respostas.map(r => r.json()));
  })
  .then(dados => {
    const [usuarios, posts, comentarios] = dados;
    console.log({ usuarios, posts, comentarios });
  });

Promise.race()

Obtenha a primeira promise a ser resolvida:

const promises = [
  fetch('/api/servidor1/dados'),
  fetch('/api/servidor2/dados'),
  fetch('/api/servidor3/dados'),
];

Promise.race(promises)
  .then(resposta => resposta.json())
  .then(dados => {
    console.log('Primeiro servidor a responder:', dados);
  });

Promise.allSettled()

Aguarde todas as promises serem estabelecidas (resolvidas ou rejeitadas):

const promises = [fetch('/api/servico1'), fetch('/api/servico2'), fetch('/api/servico3')];

Promise.allSettled(promises).then(resultados => {
  resultados.forEach((resultado, indice) => {
    if (resultado.status === 'fulfilled') {
      console.log(`Serviço ${indice + 1} bem-sucedido:`, resultado.value);
    } else {
      console.log(`Serviço ${indice + 1} falhou:`, resultado.reason);
    }
  });
});

Async/Await

Uma maneira mais legível de trabalhar com promises:

async function buscarPostsDeUsuario(idUsuario) {
  try {
    const respostaUsuario = await fetch(`/api/usuarios/${idUsuario}`);
    const usuario = await respostaUsuario.json();

    const respostaPosts = await fetch(`/api/posts?userId=${idUsuario}`);
    const posts = await respostaPosts.json();

    return { usuario, posts };
  } catch (erro) {
    console.error('Erro ao buscar posts do usuário:', erro);
    throw erro;
  }
}

// Uso
buscarPostsDeUsuario(123)
  .then(dados => console.log(dados))
  .catch(erro => console.error(erro));

Boas Práticas

1. Sempre trate erros com .catch() ou try/catch
2. Use Promise.all() para operações paralelas independentes
3. Prefira async/await para melhor legibilidade
4. Não misture async/await com .then() desnecessariamente
5. Retorne promises de funções para permitir o encadeamento