Até aqui, estudamos cada peça separadamente:

  • Call Stack
  • Event Loop
  • Microtasks e Macrotasks
  • Promises
  • async/await

Agora vamos juntar tudo e responder a pergunta final:

o que realmente acontece quando usamos async/await?

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Prever a ordem de execução com async/await
  • Entender como await interage com o Event Loop
  • Saber onde microtasks entram no fluxo
  • Evitar bugs de ordem de execução
  • Encerrar o capítulo de assincronicidade com domínio real

Modelo mental definitivo

Guarde este modelo:

  • Código síncrono → Call Stack
  • await → pausa a função
  • Continuação do await → microtask
  • setTimeout e eventos → macrotasks
  • Event Loop → organiza tudo
await não bloqueia o JavaScript — ele reorganiza o fluxo.

Exemplo 1 — async/await básico

 
  async function exemplo() 
  { 
    console.log("Dentro da função");
    await Promise.resolve();
    console.log("Depois do await");
  }
  console.log("Início");
  exemplo();
  console.log("Fim");

Qual será a ordem? 

 
  console.log("Início"); // Saída: Início
  console.log("Dentro da função");
  // Saída: Dentro da função
  console.log("Fim");
  // Saída: Fim
  // Continuação do await (microtask)
  // Saída: Depois do await

O que aconteceu aqui?

  • A função começou a executar normalmente
  • Encontrou um await
  • A função foi pausada
  • A continuação virou uma microtask
  • O Call Stack foi liberado

Exemplo 2 — async/await vs setTimeout

 
  async function teste() 
  { 
    console.log("Async início");
    await Promise.resolve();
    console.log("Async fim");
  }
  setTimeout(() => 
  {
    console.log("Timeout");
  }, 0);
teste();

 
  console.log("Async início"); // Saída: Async início
  // Microtask do await
  console.log("Async fim");
  // Saída: Async fim
  // Depois a macrotask
  console.log("Timeout");
  // Saída: Timeout
await sempre tem prioridade sobre setTimeout.

Exemplo 3 — múltiplos awaits

 
  async function fluxo() 
  { 
    console.log("Passo 1");
    await Promise.resolve();
    console.log("Passo 2");
    await Promise.resolve();
    console.log("Passo 3");
  }
fluxo();

 
  console.log("Passo 1"); // Saída: Passo 1
  // Microtask
  console.log("Passo 2");
  // Saída: Passo 2
  // Nova microtask
  console.log("Passo 3");
  // Saída: Passo 3

Cada await cria uma pausa

Cada await:

  • divide a função em partes
  • agenda a continuação como microtask
  • permite que o Event Loop execute outras tarefas

Exemplo 4 — async dentro de evento

 
  button.addEventListener("click", async () => 
  { 
    console.log("Clique");
    await Promise.resolve();
    console.log("Depois do await");
  });

 
  console.log("Clique"); // Saída: Clique
  // Microtask do await
  console.log("Depois do await");
  // Saída: Depois do await
Mesmo em eventos (macrotasks), microtasks mantêm prioridade.

Resumo visual do fluxo

 Call Stack ↓ await → pausa função ↓ Microtask Queue ↓ Event Loop ↓ Continuação da função

Erro comum: achar que await bloqueia tudo

await NÃO bloqueia o JavaScript inteiro. Ele pausa apenas a função onde está.

Resumo da aula para nunca mais esquecer

  • await pausa a função, não o JavaScript
  • A continuação do await é uma microtask
  • Microtasks têm prioridade sobre macrotasks
  • O Event Loop organiza tudo
  • Agora você consegue prever a execução

Na próxima aula, vamos mudar o foco para outro pilar avançado do JavaScript: Closures avançados.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

Recorde de patentes

A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.