Como Fazer e Tratar Requisições com o Fetch API em JavaScript

A capacidade de realizar solicitações de dados a servidores remotos é crucial. Pensando nisso, o Fetch API é uma ferramenta poderosa que simplifica esse processo, fornecendo uma interface simples e flexível para interagir com recursos remotos. Neste artigo, vamos aprender como fazer e tratar requisições da maneira correta em javascript utilizando o Fetch.

Acesse também: Entendendo o Funcionamento do Flexbox na Prática

O que é o Fetch?

O Fetch é uma API moderna para realizar requisições HTTP. Ele fornece uma alternativa mais poderosa e flexível em comparação com as técnicas mais antigas, como XMLHttpRequest. O Fetch é baseado em Promises, tornando o trabalho com requisições assíncronas mais eficiente e legível.

Fundamentos do Fetch

A utilização básica do Fetch envolve a criação de uma solicitação e o tratamento da resposta. Vamos considerar um exemplo simples de como fazer uma requisição GET:

fetch('https://api.exemplo.com/dados')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erro:', error));

Neste exemplo, a função fetch é utilizada para fazer uma requisição GET a ‘https://api.exemplo.com/dados’. O método json() é chamado na resposta para extrair os dados JSON da resposta. As Promises são encadeadas para lidar com o resultado da requisição.

Em outras palavras, se foi possível fazer o GET em ‘https://api.exemplo.com/dados’, vamos cair no primeiro then onde vamos transformar a resposta em um arquivo JSON e se for possível, vamos cair no segundo then, onde vamos logar na tela. Caso não seja possível, vai cair no bloco catch e vai logar na tela o erro.

Opções Avançadas do Fetch

O Fetch oferece uma variedade de opções para personalizar as requisições, como adicionar cabeçalhos, definir o método da requisição, enviar dados, entre outros. Vamos explorar um exemplo que envolve o envio de dados em uma requisição POST:

const dados = {
  nome: 'Usuário Exemplo',
  idade: 25,
};

fetch('https://api.exemplo.com/enviar-dados', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(dados),
})
  .then(response => response.json())
  .then(data => console.log('Resposta:', data))
  .catch(error => console.error('Erro:', error));

Neste caso, configuramos a requisição como um método POST, adicionamos um cabeçalho indicando que estamos enviando dados no formato JSON e convertemos os dados em uma string JSON usando JSON.stringify().

Mais uma vez, se a requisição foi bem sucedida cairemos na lógica do then, caso contrário, do catch.

Exemplo Prático: Consumindo uma API de Notícias

Vamos criar um exemplo prático que utiliza o Fetch para obter notícias de uma API fictícia.

const url = 'https://api.noticias.com/ultimas-noticias';

fetch(url)
  .then(response => response.json())
  .then(noticias => {
    noticias.forEach(noticia => {
      const divNoticia = document.createElement('div');
      divNoticia.innerHTML = `<h2>${noticia.titulo}</h2><p>${noticia.resumo}</p>`;
      document.getElementById('noticias-container').appendChild(divNoticia);
    });
  })
  .catch(error => console.error('Erro ao buscar notícias:', error));

Neste exemplo, as notícias da API são recuperadas e dinamicamente adicionadas a um contêiner no HTML. Isso nos mostra a versatilidade do Fetch ao lidar com diferentes tipos de dados e interações com a interface do usuário.

Porque usar Fetch API?

Existem muitos motivos para usar a Fetch API, dentre eles posso citar alguns:

1. Sintaxe Limpa e Moderna: A Fetch API tem uma sintaxe mais moderna e limpa em comparação com a XMLHttpRequest, o que torna o código mais legível e fácil de entender.
2. Promessas: A Fetch API usa o conceito de promessas (Promise), facilitando o tratamento de solicitações assíncronas. Isso é mais eficiente e legível do que os callbacks usados na XMLHttpRequest.
3. Suporte a Headers: A Fetch API permite manipular facilmente cabeçalhos HTTP, como Authorization, Content-Type, e outros. Isso é feito de forma mais direta e intuitiva.
4. Suporte a CORS (Cross-Origin Resource Sharing): A Fetch API lida de maneira mais eficiente com solicitações entre diferentes origens, seguindo as políticas de CORS. Isso é importante quando você está fazendo solicitações a partir de um domínio diferente do que o da sua aplicação.
5. Fluxo de Resposta Simplificado: O processo de manipulação de resposta é simplificado com a Fetch API. Você pode usar métodos como json(), text(), e blob() diretamente na resposta para obter os dados no formato desejado.
6. Integração com Service Workers: A Fetch API é projetada para trabalhar bem com Service Workers, que são scripts executados em segundo plano para realizar tarefas como push notifications e cache de recursos.
7. Suporte Nativo a FormData: A Fetch API suporta o uso de objetos FormData, facilitando o envio de dados de formulários de maneira simples e eficiente.
8. Compatibilidade com o Ecossistema Moderno: A Fetch API é mais alinhada com a arquitetura e as práticas modernas de desenvolvimento web. Ela se integra bem com outras tecnologias e padrões, como Promises, async/await, e é frequentemente utilizada junto com frameworks e bibliotecas modernas.

Não Tenha Medo de Utilizar o Fetch API

O Fetch em JavaScript oferece uma maneira moderna e eficiente de lidar com requisições HTTP. Sua sintaxe clara e Promises simplificam o código assíncrono, enquanto suas opções avançadas proporcionam flexibilidade para diversas necessidades. Ao incorporar o Fetch em seus projetos, você terá uma ferramenta robusta para interagir com APIs, consumir dados remotos e criar experiências web dinâmicas. Este é um elemento essencial no conjunto de habilidades de qualquer desenvolvedor web moderno.