Frontend Academy · Aula

Promises: then catch finally Promise.all

Crie e encadeie Promises, trate erros em blocos catch, execute a limpeza em finally e execute várias Promises em paralelo com Promise.all.

Aula 3 de 413 etapas

Promises: then catch finally Promise.all é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é uma promessa?

Uma promessa representa um valor que estará disponível no futuro. Ela é um objeto com um de três estados: pendente (inicial), cumprida (resolvida com um valor) ou rejeitada (falhou por algum motivo). Depois de concluído, o estado de uma promessa é permanente.

Criando uma promessa

Crie uma promessa com o construtor new Promise(executor). A função executora recebe as funções de retorno resolve e reject. Chame resolve com o valor de sucesso ou reject com um erro.

const delay = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

const fetchData = (url) => new Promise((resolve, reject) => {
  fetch(url)
    .then(res => res.json())
    .then(resolve)
    .catch(reject);
});

.then() — tratando o sucesso

promise.then(onFulfilled) registra uma função de retorno que é executada quando a promessa é cumprida. Ela recebe o valor resolvido. .then() retorna uma nova promessa, permitindo o encadeamento.

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log('Users:', users);
    return users.length;
  })
  .then(count => console.log('Count:', count));

.catch() — tratando erros

promise.catch(onRejected) trata rejeições. Quando colocado no final de uma cadeia, captura qualquer erro de qualquer etapa anterior.

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => processData(data))
  .catch(err => {
    console.error('Failed:', err.message);
    showErrorToUser();
  });

.finally() — executando sempre

promise.finally(onFinally) é executado independentemente de a promessa ter sido cumprida ou rejeitada. É perfeito para a limpeza: ocultar um indicador de carregamento, liberar um bloqueio e registrar dados analíticos.

showSpinner();
fetch('/api/data')
  .then(res => res.json())
  .then(render)
  .catch(handleError)
  .finally(() => hideSpinner()); // always runs

Encadeamento de promessas — retornando valores

Retorne um valor de .then(), e ele se tornará o valor resolvido do próximo .then(). Retorne uma nova promessa para encadear operações assíncronas sequencialmente.

getUser(id)
  .then(user => getOrders(user.id))  // return Promise
  .then(orders => orders[0])          // return value
  .then(order => console.log(order)); // receive order

Promise.all() — executando em paralelo

Promise.all([p1, p2, p3]) aguarda todas as promessas serem resolvidas e retorna uma matriz de resultados na mesma ordem. Se alguma promessa for rejeitada, tudo será rejeitado imediatamente.

const [user, posts, comments] = await Promise.all([
  fetch('/api/user/1').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequential

Promise.allSettled() — sem falha imediata

Promise.allSettled() aguarda todas as promessas serem concluídas (resolvidas ou rejeitadas) e retorna uma matriz de objetos de resultado com estado e valor ou com estado e motivo. É útil quando não se deseja que uma falha elimine todos os resultados.

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
  if (result.status === 'fulfilled') use(result.value);
  else logError(result.reason);
});

Promise.race() e Promise.any()

Promise.race() é resolvida ou rejeitada com a primeira promessa concluída. Promise.any() é resolvida com a primeira promessa cumprida (ignora rejeições e só é rejeitada se todas forem rejeitadas). É útil para limites de tempo e redundância.

// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);

Criando promessas já concluídas

Promise.resolve(value) cria uma promessa já cumprida com value. Promise.reject(error) cria uma promessa já rejeitada. É útil para testes e funções adaptadoras.

const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42

Eventos de rejeição não tratada

Se uma promessa for rejeitada sem um .catch(), ela se tornará uma rejeição não tratada. Navegadores modernos e Node.js emitem avisos. Sempre associe um .catch() ou use try/catch com async/await.

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

Verificação rápida

Qual método estático executa várias promessas em paralelo e é resolvido com uma matriz contendo todos os resultados?

Responda na aula interativa

Recapitulação: promessas

.then() para sucesso, .catch() para erros e .finally() para limpeza. As cadeias passam valores adiante. Promise.all() executa em paralelo. Promise.allSettled() tolera falhas parciais. Promise.race() é usado para obter o resultado mais rápido. Sempre trate as rejeições. O código moderno usa async/await como uma simplificação sintática sobre promessas.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 41
Aulas: 163

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Promises: then catch finally Promise.all” é grátis?

Sim — o texto completo de “Promises: then catch finally Promise.all” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Promises: then catch finally Promise.all”?

Crie e encadeie Promises, trate erros em blocos catch, execute a limpeza em finally e execute várias Promises em paralelo com Promise.all. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Promises: then catch finally Promise.all”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

O loop de eventos: pilha de chamadas fila microtarefas
Callbacks e callback hell
Promises: then catch finally Promise.all
async/await e tratamento de erros

← Voltar para Frontend Academy