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?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

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.