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.

Contribuições de

Ricardo Vasconcellos

Desenvolvedor full stack especialista em PHP, JavaScript, Node.js, Python e SQL.

Mais sobre o autor

Compartilhe este tutorial