JavaScript: Programação Assíncrona em JavaScript

Última atualização: 2026-10-13

JavaScript é single-threaded — só consegue fazer uma coisa por vez. Mas se uma requisição de rede leva 3 segundos, a página deve congelar por 3 segundos? Claro que não. A programação assíncrona resolve isso: em vez de esperar, você pega uma senha e volta quando estiver pronto. Como um sistema de fila de restaurante — você não fica na porta da cozinha, senta e espera sua senha ser chamada.

Métodos assíncronos：async/await Promise.allSettled Promise.race Promise.all setTimeout Promise catch then

1. Síncrono vs Assíncrono

Síncrono: O código executa linha por linha — a próxima linha espera a atual terminar. Como ficar na fila — você espera até que a pessoa à sua frente termine.

Assíncrono: Certas operações (requisições de rede, temporizadores, E/S de arquivo) iniciam sem bloquear o código subsequente. Quando terminam, você é notificado via callback ou Promise.

<script>
console.log('1');
setTimeout(function() {
  console.log('2');
}, 1000);
console.log('3');
</script>

A ordem de saída é 1 → 3 → 2. setTimeout é assíncrono — seu callback executa após 1 segundo sem bloquear console.log('3').

Callbacks são o padrão assíncrono mais básico — passe uma função como argumento, e ela será chamada quando a operação assíncrona completar.

▶ Exemplo: Uso Básico de Callback

(1) Callback Hell

Quando operações assíncronas dependem umas das other em sequência, callbacks ficam cada vez mais aninhados — este é o infame "Callback Hell."

<script>
obterUsuario(function(usuario) {
  obterPedidos(usuario.id, function(pedidos) {
    obterDetalhePedido(pedidos[0].id, function(detalhe) {
      obterItens(detalhe.itemId, function(itens) {
        console.log('4 níveis de profundidade — adicione mais complexidade e fica ilegível');
      });
    });
  });
});
</script>

3. Promise

Uma Promise é um objeto que representa o resultado eventual de uma operação assíncrona. Tem três estados:

Quando uma Promise transiciona de pending para fulfilled ou rejected, ela nunca volta atrás — como uma flecha uma vez disparada, não pode ser chamada de volta.

(1) Criando uma Promise

<script>
const promise = new Promise(function(resolve, reject) {
  // operação assíncrona
  // chame resolve(resultado) em caso de sucesso
  // chame reject(erro) em caso de falha
});
</script>

(2) then / catch / finally

<script>
promise
  .then(function(resultado) { console.log(resultado); })   // executa em caso de sucesso
  .catch(function(erro) { console.error(erro); })          // executa em caso de falha
  .finally(function() { console.log('Concluído'); });       // executa sempre
</script>

▶ Exemplo: Simulando uma Requisição com Promise

(3) Encadeamento

then em si retorna uma Promise, então você pode encadear chamadas — callback hell vira uma linha reta.

<script>
buscarUsuario()
  .then(function(usuario) { return buscarPedidos(usuario.id); })
  .then(function(pedidos) { return buscarDetalhe(pedidos[0].id); })
  .then(function(detalhe) { console.log(detalhe); })
  .catch(function(err) { console.error(err); });
</script>

4. async / await

async/await é açúcar sintático sobre Promisses — faz código assíncrono parecer síncrono, melhorando muito a legibilidade.

• async: Declara uma função assíncrona que automaticamente retorna uma Promise
• await: Pausa a execução até a Promise ser resolvida, depois retorna o resultado

▶ Exemplo: Reescrevendo a Requisição Acima com async/await

(1) Tratamento de Erros

async/await usa try/catch para tratamento de erros — o mesmo padrão usado com código síncrono.

<script>
async function carregarTudo() {
  try {
    const usuario = await buscarUsuario();
    const pedidos = await buscarPedidos(usuario.id);
    console.log(pedidos);
  } catch (err) {
    console.error('Algo deu errado:', err);
  }
}
</script>

5. Promise.all e Promise.race

▶ Exemplo: Requisições Concorrentes com Promise.all

Métodos assíncronos：async/await Promise.allSettled Promise.race Promise.all setTimeout Promise catch then

❓ Perguntas Frequentes

📖 Resumo

• Código síncrono bloqueia execução subsequente; código assíncrono não — single-threaded ainda consegue "fazer várias coisas"
• Callbacks são o padrão assíncrono mais básico; aninhamento profundo cria callback hell
• Promise tem três estados: pending → fulfilled ou pending → rejected — transições de estado são irreversíveis
• then/catch/finally consomem Promisses; encadeamento resolve callback hell
• async/await é açúcar sintático sobre Promises; await só pode ser usado dentro de funções async
• Promise.all espera todas terem sucesso; Promise.race pega a primeira a resolver

📝 Exercícios

1. Básico: Use Promise + setTimeout para simular um atraso de 2 segundos, depois exiba "Concluído" em caso de sucesso.
2. Intermediário: Reescreva o acima com async/await e adicione tratamento de erros com try/catch.
3. Desafio: Use Promise.all para disparar 3 requisições simuladas com atrasos diferentes (1s/2s/3s) concorrentemente, depois calcule e exiba o tempo total decorrido quando todas completarem.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós