Na aula anterior, entendemos o que é uma API e como ela funciona como ponte entre o frontend e o backend.

Agora chegou a hora de aprender como o JavaScript faz pedidos reais para uma API. Para isso, usamos a Fetch API.

🎯 Objetivo da aula

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

  • Entender o que é a Fetch API
  • Fazer uma requisição HTTP com fetch
  • Compreender o retorno de uma Promise
  • Ler respostas da API
  • Preparar o caminho para consumir APIs REST

O que é a Fetch API?

A Fetch API é uma função nativa do JavaScript que permite fazer requisições HTTP.

Em outras palavras: 👉 é ela que usamos para pedir dados para uma API.

A Fetch API é assíncrona e retorna uma Promise.

A estrutura básica do fetch

A forma mais simples de usar o fetch é passando a URL da API: 

 fetch("https://api.exemplo.com/dados");

Mas isso sozinho não faz nada visível. Precisamos tratar a resposta. O fetch sozinho NÃO devolve dados. Ele devolve um objeto do tipo Response

fetch retorna uma Promise

Como o fetch é assíncrono, usamos then para acessar o resultado: 

 
        fetch("https://api.exemplo.com/dados") 
        .then(response => 
        { 
          console.log(response); 
        });

O objeto response representa a resposta da API, não os dados ainda.

Lendo o corpo da resposta

Normalmente, APIs retornam dados em JSON. Para ler esse conteúdo, usamos response.json(). 

 
          fetch("https://api.exemplo.com/dados") 
          .then(response => response.json()) 
          .then(dados => 
          { 
            console.log(dados); 
          });

Agora sim estamos acessando os dados retornados pela API.

Exemplo real com uma API pública

Vamos usar uma API pública de exemplo para facilitar o aprendizado: 

 
          fetch("https://jsonplaceholder.typicode.com/posts/1") 
          .then(response => response.json()) 
          .then(post => 
          { 
            console.log(post.title); 
          }); 
 console.log(post.title); // Saída será algo como "sunt aut facere repellat provident occaecati..."

Usando fetch com async/await

Como vimos antes, o fetch funciona muito bem com async/await: 

 
            async function buscarPost() 
            { 
              const response = await fetch("https://jsonplaceholder.typicode.com/posts/1"); 
              const post = await response.json();
              console.log(post.title);
            }
            buscarPost();

 console.log(post.title); // Saída será o título do post

O fetch só falha em erros de rede

Um ponto importante:

O fetch só rejeita a Promise em erros de rede. Erros HTTP (404, 500) ainda retornam uma resposta.

Por isso, é comum verificar response.ok. 

 async function buscarDados() { const response = await fetch("https://jsonplaceholder.typicode.com/posts/9999");

if (!response.ok) {
throw new Error("Erro na requisição");
}

const dados = await response.json();
console.log(dados);
}

buscarDados();

Resumo do fluxo do fetch

  • Fazemos o pedido com fetch
  • Recebemos um response
  • Extraímos os dados com response.json()
  • Usamos os dados na aplicação

Resumo da aula para nunca mais esquecer

  • A Fetch API faz requisições HTTP
  • Ela retorna uma Promise
  • Usamos response.json() para ler os dados
  • Funciona muito bem com async/await
  • É a base para consumir APIs REST

Na próxima aula, vamos aprender a consumir APIs REST de forma organizada e prática.

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?

Mario e seu bigode

O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.

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.

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.

Mortal Kombat - O Filme

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

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.