Até aqui, entendemos profundamente Promises e async/await.

Agora é hora de aplicar isso em um dos usos mais comuns do JavaScript moderno:

consumir dados de uma API usando fetch.

Aqui vamos trabalhar com exemplos reais, erros reais e decisões reais.

🎯 Objetivo da aula

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

  • Usar fetch com async/await
  • Entender o que o fetch realmente retorna
  • Tratar erros de rede corretamente
  • Evitar armadilhas comuns
  • Ler código assíncrono com confiança

O que é o fetch?

fetch é uma função nativa do JavaScript usada para:

  • Fazer requisições HTTP
  • Buscar dados de APIs
  • Enviar e receber informações

Importante:

fetch NÃO rejeita a Promise em erro HTTP (404, 500).
Exemplo: ao se deparar com isso:

fetch("/usuarios/999")
.then(...)
.catch(...)

A intuição é achar que se der erro 404 ou 500, o .catch() será chamado, mas isso NÃO é verdade com o fetch!

O fetch só rejeita a Promise quando ocorre um erro de rede, por exemplo:

  • Sem internet
  • DNS não resolve
  • Servidor fora do ar
  • Requisição bloqueada (CORS, etc.)
👉 Erro HTTP ≠ erro de rede

O que é um erro HTTP para o fetch?

Para o fetch, um erro HTTP como:

  • 404 (Not Found)
  • 401 (Unauthorized)
  • 500 (Internal Server Error)
👉 é uma resposta válida do servidor.

Ou seja:

  • O servidor respondeu
  • O protocolo HTTP funcionou
  • A requisição chegou e voltou
  • Então, para o fetch:
“A comunicação foi bem-sucedida.”

Primeiro exemplo — fetch simples

Vamos buscar dados de uma API pública: 

 
  async function buscarUsuario() 
  { 
    const resposta = await fetch("https://jsonplaceholder.typicode.com/users/1"); const dados = await resposta.json();
    console.log(dados);
  }
  buscarUsuario();
O primeiro await espera a resposta HTTP. O segundo await espera a conversão para JSON.

Entendendo o que acontece aqui

  • fetch() retorna uma Promise
  • await pausa a função
  • O Call Stack é liberado
  • A execução continua quando a resposta chega

Tratando erros corretamente

Agora vamos tratar erros do jeito certo. 

 
  async function buscarUsuario() 
  { 
    try
     { 
      const resposta = await fetch("https://jsonplaceholder.typicode.com/users/999");
      if (!resposta.ok) 
        {
          throw new Error("Erro HTTP: " + resposta.status);
        }
        const dados = await resposta.json();
        console.log(dados);
      } 
      catch (erro) 
      {
        console.log("Erro ao buscar usuário:", erro.message);
      }
  }
  buscarUsuario();

 console.log("Erro ao buscar usuário: Erro HTTP: 404"); // Saída esperada se o usuário não existir

Por que precisamos testar resposta.ok?

Porque:

  • fetch só rejeita em erro de rede
  • 404 e 500 ainda são respostas válidas
  • O erro precisa ser tratado manualmente

Exemplo realista — função reutilizável

Um padrão muito comum: 

 
  async function fetchJSON(url) 
  { 
    const resposta = await fetch(url);
    if (!resposta.ok) 
      {
        throw new Error("Erro HTTP: " + resposta.status);
      }
      return resposta.json();
  }

Usando a função: 

 
  async function executar() 
  { 
    try 
    { 
      const usuario = await fetchJSON( "https://jsonplaceholder.typicode.com/users/1" );
      console.log(usuario.name); // Saída será o nome do usuário
    } 
    catch (erro) 
    {
      console.log("Erro:", erro.message);
    }
  }
executar();

Vantagem real do async/await aqui

  • Fluxo linear
  • Leitura natural
  • Tratamento de erro centralizado
  • Código mais fácil de manter
Com async/await, o código parece síncrono — mas continua assíncrono.

Erro comum para evitar

 const dados = await fetch(url).json(); // ❌ errado

O correto é: 

 const resposta = await fetch(url); const dados = await resposta.json(); // ✅

Resumo da aula para nunca mais esquecer

  • fetch retorna uma Promise
  • await pausa apenas a função
  • Erros HTTP não rejeitam automaticamente
  • resposta.ok deve ser verificado
  • async/await deixa o código mais legível

Na próxima aula, vamos integrar async/await com tudo o que vimos sobre Event Loop, microtasks e fluxo de execução — fechando esse capítulo com chave de ouro.

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?

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.

Mega Man

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".

Pac Man

Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.

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.