Entenda o fetch API e como fazer requisições HTTP em JavaScript

O que é o fetch API e como usá-lo para fazer requisições HTTP?

O fetch API é uma interface moderna em JavaScript para fazer requisições HTTP de maneira simples e legível. Ele foi introduzido para substituir a antiga XMLHttpRequest, oferecendo uma abordagem mais promissora e baseada em Promises para lidar com requisições assíncronas. O fetch é muito útil quando você precisa buscar dados de servidores, enviar informações a APIs ou mesmo trabalhar com arquivos de diferentes formatos, como JSON, XML ou texto.

Como funciona o fetch API?

O fetch retorna uma Promise, o que significa que você pode usar métodos como .then() e catch() para lidar com a resolução ou falha da requisição. Quando você faz uma requisição com fetch, ele começa a enviar os dados, e a Promise retornada resolve com a resposta quando a requisição é concluída com sucesso.

Exemplo básico de uso do fetch:

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

Neste exemplo, a função fetch() faz uma requisição GET para o endpoint da API fornecido. Quando a resposta é recebida, ela é convertida para JSON com o método .json() e, em seguida, o conteúdo é impresso no console. Se ocorrer um erro, ele será capturado pelo .catch().

Requisições com métodos diferentes

O fetch também permite que você especifique o método HTTP a ser usado na requisição. O método padrão é GET, mas você pode usar outros métodos como POST, PUT, DELETE, entre outros, para interagir com a API ou servidor.

Exemplo de requisição POST com fetch:

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

Neste exemplo, estamos enviando dados JSON para o servidor utilizando o método POST. O corpo da requisição é enviado com JSON.stringify(), que converte o objeto JavaScript em uma string JSON. Em seguida, a resposta da API é manipulada e exibida.

Lidando com erros em fetch

Uma das grandes vantagens do fetch é a sua capacidade de tratar erros de forma simples com o uso de .catch(). No entanto, é importante notar que o fetch não rejeita automaticamente a Promise para status HTTP com falhas, como 404 ou 500. Para tratar isso adequadamente, você pode verificar o status da resposta e rejeitar a Promise manualmente se necessário.

Exemplo de verificação de status de resposta:

fetch('https://api.exemplo.com/dados')
  .then(response => {
    if (!response.ok) {
      throw new Error('Erro na resposta da API');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log('Erro:', error));

Neste exemplo, estamos verificando a propriedade ok da resposta para garantir que o código de status HTTP seja 200-299. Caso contrário, um erro será lançado e tratado pelo catch.

Como trabalhar com dados JSON

Quando você faz uma requisição para uma API que retorna dados em JSON, é comum que você queira manipular esses dados. O fetch torna isso simples ao fornecer um método chamado .json(), que converte automaticamente a resposta da requisição para um objeto JavaScript.

Exemplo de como trabalhar com JSON no fetch:

fetch('https://api.exemplo.com/usuarios')
  .then(response => response.json())
  .then(data => {
    data.forEach(usuario => {
      console.log(usuario.nome);
    });
  })
  .catch(error => console.log('Erro:', error));

Neste exemplo, após obter a resposta JSON da API, usamos .forEach() para iterar sobre o array de usuários e imprimir o nome de cada um.

Conclusão

O fetch API é uma ferramenta poderosa para fazer requisições HTTP de forma simples, legível e eficiente. Ele oferece uma abordagem baseada em Promises para lidar com respostas assíncronas e permite um controle mais claro sobre os métodos HTTP, cabeçalhos e o corpo das requisições. Se você está trabalhando com APIs ou precisando enviar e receber dados em tempo real, o fetch será uma das suas principais ferramentas.

Além disso, ao lidar com erros corretamente e verificar o status da resposta, você pode garantir que suas requisições sejam robustas e capazes de lidar com falhas de maneira eficaz.

Por que o fetch é a melhor escolha para requisições HTTP em JavaScript

O fetch API tem revolucionado a maneira como os desenvolvedores JavaScript interagem com APIs e servidores. Com uma sintaxe moderna e baseada em Promises, ele oferece uma alternativa muito mais intuitiva em comparação com o antigo XMLHttpRequest. Além disso, seu uso adequado pode melhorar a legibilidade do seu código e facilitar a integração com sistemas externos.

Algumas aplicações:

• Realizar requisições GET para buscar dados de APIs ou servidores.
• Enviar dados para um servidor usando métodos como POST, PUT ou DELETE.
• Lidar com erros de rede ou resposta de API de maneira eficaz.
• Converter respostas de API em JSON e manipulá-las facilmente no seu código.

Dicas para quem está começando

• Comece usando o fetch para fazer requisições simples e depois avance para métodos como POST e PUT para enviar dados.
• Verifique sempre o status da resposta com response.ok para garantir que a requisição foi bem-sucedida.
• Use .json() para converter respostas em JSON, que é o formato mais comum ao trabalhar com APIs.
• Se você estiver fazendo múltiplas requisições, considere usar Promise.all() para esperar que todas as Promises sejam resolvidas antes de prosseguir.

Compartilhe este tutorial