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?

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.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Space Invaders

O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

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.