Aula 42 — Fetch API

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:

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

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