Como Usar Fetch API em JavaScript: Guia Completo para Iniciantes

Neste guia, aprenda como usar Fetch API, uma ferramenta poderosa do JavaScript para requisições HTTP.

Se você está começando no desenvolvimento web e quer entender como consumir APIs de forma simples, este guia é para você! Vamos explorar como o Fetch API funciona, como tratar respostas e erros, e como configurar requisições GET e POST, tudo com exemplos práticos e linguagem acessível.

O que é o Fetch API e por que usá-lo?

O Fetch API é uma interface moderna do JavaScript que permite fazer requisições HTTP (como GET e POST) de forma mais simples e flexível que o antigo XMLHttpRequest. Ele é nativo nos navegadores, ou seja, não precisa de bibliotecas externas, e trabalha com promises, facilitando o manejo de operações assíncronas.

• Por que usar?
  • Código mais limpo e legível.
  • Suporte a promises para lidar com respostas assíncronas.
  • Flexibilidade para configurar cabeçalhos, métodos e dados enviados.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Como fazer uma requisição GET com o Fetch API?

A requisição GET é usada para buscar dados de uma API.

Vamos usar a API pública jsonplaceholder.typicode.com para testar.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(resposta => resposta.json())
  .then(json => console.log(json));

A requisição acima retorna uma lista de 100 posts com id, title, e outros campos. Para buscar um post específico, adicione o ID na URL, como /posts/5.

Resultados de requisições GET

Como tratar erros em requisições com o Fetch?

O Fetch não considera respostas como 404 ou 500 como erros. Ele só rejeita a promise em caso de falhas de conexão. Para tratar erros HTTP, precisamos verificar a propriedade ok da resposta.

fetch('https://jsonplaceholder.typicode.com/posts/200')
  .then(resposta => {
    if (resposta.ok) {
      return resposta.json();
    } else {
      console.log('Deu erro!');
    }
  })
  .then(json => console.log(json))
  .catch(erro => console.log('Erro de conexão:', erro));

Dica: Sempre verifique resposta.ok para evitar processar respostas inválidas.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Como fazer uma requisição POST com o Fetch API?

A requisição POST é usada para enviar dados a uma API, como criar um novo recurso. Para isso, configuramos o método, cabeçalhos e corpo da requisição.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    userId: 1,
    id: 101,
    title: 'Novo Post',
    body: 'Conteúdo do post'
  })
})
  .then(resposta => {
    if (resposta.ok) {
      return resposta.json();
    } else {
      console.log('Erro na requisição POST!');
    }
  })
  .then(json => console.log(json))
  .catch(erro => console.log('Erro de conexão:', erro));

Nota: A API jsonplaceholder não aceita POST de forma persistente, mas retorna uma resposta simulada.

Quais são os próximos passos para usar o Fetch API?

Agora que você sabe o básico, aqui estão algumas ideias para avançar:

• Explorar outros métodos HTTP: Teste PUT (atualizar) e DELETE (excluir).
• Usar async/await: Substitua .then() por uma sintaxe mais clara.

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

• Integrar com projetos reais: Consuma APIs de terceiros, como a do GitHub ou OpenWeather.
• Tratar erros avançados: Verifique status específicos (ex.: 401, 403) para mensagens personalizadas.

Conclusão - Como usar Fetch API em JavaScript

O Fetch API é uma ferramenta essencial para desenvolvedores web que querem interagir com APIs de forma prática e moderna. Com ele, você pode buscar dados (GET), enviar informações (POST) e tratar erros de forma eficiente.

Comece praticando com APIs públicas como a jsonplaceholder e, aos poucos, integre o Fetch em seus projetos. Experimente os exemplos deste post e explore async/await para tornar seu código ainda mais limpo!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!