Como Fazer Solicitações HTTP em Node.js Com a Fetch API

Principais Conclusões

• A API Fetch fornece uma interface moderna, baseada em promessas, para fazer requisições HTTP no Node.js, alinhando-se às práticas de desenvolvimento do lado do navegador.
• O Node.js v18 e acima inclui suporte nativo para a API Fetch, eliminando a necessidade de bibliotecas externas como node-fetch para operações básicas.
• Compreender os diversos métodos HTTP (GET, POST, PUT, DELETE, PATCH) e recursos avançados como cabeçalhos, timeouts e tratamento de erros é crucial para interações robustas com APIs.
• Aproveitar a API Fetch efetivamente pode otimizar a busca de dados, melhorar a legibilidade do código e aumentar o desempenho do aplicativo em ambientes Node.js.
• Para necessidades complexas de web scraping e aquisição de dados, serviços especializados como Scrapeless oferecem capacidades avançadas além do que a API Fetch nativa proporciona.

Introdução

Fazer requisições HTTP é uma tarefa fundamental no desenvolvimento web moderno. Seja buscando dados de uma API REST, enviando dados de formulários ou interagindo com serviços de terceiros, um mecanismo confiável de comunicação em rede é essencial. Para desenvolvedores Node.js, a API Fetch emergiu como uma solução poderosa e padronizada. Este artigo fornece um guia abrangente para usar a API Fetch do Node.js, detalhando vários métodos de requisição, configurações avançadas e melhores práticas para garantir interações de dados eficientes e robustas. Vamos explorar dez soluções detalhadas, completas com exemplos de código, para capacitá-lo a construir aplicativos Node.js de alto desempenho. Ao final, você terá uma compreensão clara de como aproveitar a API Fetch para diversos casos de uso, desde a simples recuperação de dados até requisições autenticadas complexas, otimizando assim seu fluxo de trabalho de desenvolvimento.

1. Requisição Básica GET

O tipo mais comum de requisição HTTP é o GET, usado para recuperar dados de um recurso especificado. A API Fetch do Node.js simplifica significativamente esse processo. Ela retorna uma Promise que se resolve em um objeto Response, que precisa ser processado para extrair os dados reais. Este método é ideal para buscar informações públicas ou dados somente de leitura de um endpoint da API.

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Dados recuperados:', data);
  } catch (error) {
    console.error('Erro ao recuperar dados:', error);
  }
}

fetchData();

Este exemplo demonstra uma requisição básica GET para recuperar um único post de uma API pública. A propriedade response.ok verifica se o código de status HTTP está na faixa de 200-299, indicando uma requisição bem-sucedida. Este é um passo crucial para o tratamento adequado de erros ao usar a API Fetch do Node.js.

2. Requisição Básica POST

As requisições POST são usadas para enviar dados a um servidor, geralmente para criar um novo recurso. Ao realizar uma requisição POST com a API Fetch do Node.js, você precisa especificar o method como 'POST' no objeto de opções e incluir os dados na propriedade body. É comum enviar dados como JSON, exigindo que o cabeçalho Content-Type seja definido como application/json.

async function createPost() {
  try {
    const newPost = {
      title: 'foo',
      body: 'bar',
      userId: 1,
    };

    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newPost),
    });

    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Novo post criado:', data);
  } catch (error) {
    console.error('Erro ao criar post:', error);
  }
}

createPost();

Este trecho de código ilustra como criar um novo post usando uma requisição POST. O método JSON.stringify() converte o objeto JavaScript em uma string JSON, que é então enviada como o corpo da requisição. Esta é uma prática padrão para enviar dados estruturados com a API Fetch do Node.js.

3. Tratamento de Cabeçalhos HTTP

Os cabeçalhos HTTP fornecem informações adicionais sobre a requisição ou resposta. Você pode personalizar os cabeçalhos de requisição utilizando a propriedade headers no objeto de opções da API Fetch do Node.js. Isso é particularmente útil para enviar tokens de autenticação, especificar tipos de conteúdo ou definir agentes de usuário personalizados. Gerenciar os cabeçalhos de forma adequada é vital para uma comunicação segura e eficaz com a API.

async function fetchWithHeaders() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1', {
      headers: {
        'Authorization': 'Bearer seu_token_aqui',
        'User-Agent': 'MeuAppNode/1.0',
        'Accept': 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }

    const data = await response.json();

console.log('Dados do usuário com cabeçalhos personalizados:', data);
  } catch (error) {
    console.error('Erro ao buscar com cabeçalhos:', error);
  }
}

fetchWithHeaders();

Neste exemplo, estamos adicionando um cabeçalho Authorization para autenticação da API, um User-Agent para identificar nossa aplicação e um cabeçalho Accept para especificar o formato de resposta desejado. Isso demonstra a flexibilidade da API Fetch do Node.js em lidar com diversos requisitos de cabeçalhos.

4. Requisição PUT para Atualização de Recursos

Requisições PUT são usadas para atualizar um recurso existente no servidor. Ao contrário de PATCH, PUT normalmente substitui o recurso inteiro pelos novos dados fornecidos. Ao usar a API Fetch do Node.js para requisições PUT, você especificará o method como 'PUT' e incluirá os dados atualizados no body.

async function updatePost() {
  try {
    const updatedPost = {
      id: 1,
      title: 'título atualizado',
      body: 'corpo atualizado',
      userId: 1,
    };

    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updatedPost),
    });

    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Post atualizado:', data);
  } catch (error) {
    console.error('Erro ao atualizar post:', error);
  }
}

updatePost();

Este código mostra como atualizar um post usando uma requisição PUT. Todo o objeto updatedPost é enviado, substituindo o recurso existente no URL especificado. Este é um padrão comum para gerenciar dados com a API Fetch do Node.js.

5. Requisição DELETE para Remoção de Recursos

Requisições DELETE são usadas para remover um recurso especificado do servidor. Essas requisições normalmente não requerem um corpo de requisição. A API Fetch do Node.js lida com requisições DELETE simplesmente definindo o method como 'DELETE'.

async function deletePost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'DELETE',
    });

    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }

    console.log('Post excluído com sucesso.');
  } catch (error) {
    console.error('Erro ao excluir post:', error);
  }
}

deletePost();

Este exemplo demonstra uma requisição DELETE simples. Após uma exclusão bem-sucedida, o servidor normalmente retorna um status 200 OK ou 204 No Content. A API Fetch do Node.js fornece uma maneira limpa de realizar tais operações.

6. Requisição PATCH para Atualizações Parciais

Requisições PATCH são usadas para aplicar modificações parciais a um recurso. Ao contrário de PUT, que substitui o recurso inteiro, PATCH apenas envia as alterações. Isso pode ser mais eficiente para grandes recursos onde apenas alguns campos precisam ser atualizados. A API Fetch do Node.js suporta PATCH definindo o method adequadamente.

async function patchPost() {
  try {
    const partialUpdate = {
      title: 'título parcialmente atualizado',
    };

    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(partialUpdate),
    });

    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Post parcialmente atualizado:', data);
  } catch (error) {
    console.error('Erro ao aplicar patch no post:', error);
  }
}

patchPost();

Este trecho mostra como realizar uma requisição PATCH para atualizar apenas o título de um post. Este método é altamente eficiente para atualizações incrementais, tornando a API Fetch do Node.js versátil para várias tarefas de gerenciamento de dados.

7. Tratamento de Timeouts e Aborto de Requisições

As requisições de rede podem às vezes ficar presas ou demorar muito, impactando a experiência do usuário. A API Fetch do Node.js pode ser combinada com AbortController para implementar timeouts e cancelamento de requisições. Este é um recurso crítico para construir aplicativos resilientes que podem lidar de forma elegante com problemas de rede.

async function fetchWithTimeout() {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000); // timeout de 5 segundos

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      signal: controller.signal,
    });

    clearTimeout(timeoutId);

    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Dados buscados dentro do timeout:', data.slice(0, 2)); // Registra os primeiros 2 itens
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('Busca abortada devido ao timeout.');
    } else {
      console.error('Erro ao buscar dados com timeout:', error);
    }
  }
}

fetchWithTimeout();

Este exemplo demonstra como definir um tempo limite de 5 segundos para uma solicitação fetch. Se a solicitação não for concluída dentro desse tempo, será abortada, e um AbortError será capturado. Esse manuseio robusto de erros é essencial para aplicações que dependem da API Fetch do Node.js para comunicações externas.

8. Enviando Dados de Formulário (multipart/form-data)

Ao lidar com uploads de arquivos ou envios de formulários complexos, multipart/form-data é o tipo de conteúdo padrão. A API Fetch do Node.js pode lidar com isso usando a API FormData. Isso é particularmente útil para aplicações web que precisam interagir com formulários HTML tradicionais ou pontos de upload de arquivo.

async function uploadFile() {
  try {
    const formData = new FormData();
    // Em uma aplicação real, 'file' seria um objeto Blob ou File
    // Para demonstração, simularemos um arquivo com uma string
    formData.append('username', 'JohnDoe');
    formData.append('profilePicture', 'fake_file_content', 'profile.txt');

    const response = await fetch('https://httpbin.org/post', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Resposta do upload do arquivo:', data);
  } catch (error) {
    console.error('Erro ao enviar o arquivo:', error);
  }
}

uploadFile();

Este exemplo mostra como construir FormData e enviá-lo com uma solicitação POST. A API Fetch do Node.js define automaticamente o cabeçalho Content-Type como multipart/form-data quando um objeto FormData é fornecido como body. Isso simplifica o manuseio de envios de formulários complexos.

9. Respostas em Streaming

Para respostas grandes ou feeds de dados em tempo real, o streaming da resposta pode ser mais eficiente do que esperar que a resposta inteira seja baixada. A API Fetch do Node.js permite que você acesse o corpo da resposta como um ReadableStream, permitindo processar dados em pedaços. Isso é particularmente benéfico para aplicações críticas em desempenho ou ao lidar com fluxos contínuos de dados.

async function streamResponse() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/comments');

    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }

    const reader = response.body.getReader();
    let receivedLength = 0; // bytes recebidos até o momento
    let chunks = []; // array de blocos binários recebidos (compreende o corpo)

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        break;
      }

      chunks.push(value);
      receivedLength += value.length;
      console.log(`Recebido ${receivedLength} bytes`);
    }

    const received = new Blob(chunks); // (o Blob é um tipo de objeto semelhante a arquivo)
    const text = await received.text();
    console.log('Resposta em streaming completa. Comprimento total:', receivedLength, 'bytes. Os primeiros 200 caracteres:', text.substring(0, 200));

  } catch (error) {
    console.error('Erro ao transmitir a resposta:', error);
  }
}

streamResponse();

Este exemplo demonstra a leitura do corpo da resposta como um fluxo, processando-o em pedaços. Essa abordagem pode reduzir significativamente o uso de memória e melhorar a capacidade de resposta para aplicações que manipulam grandes conjuntos de dados por meio da API Fetch do Node.js.

10. API Fetch vs. Axios: Uma Comparação

Embora a API Fetch do Node.js agora seja nativa, o Axios continua sendo uma alternativa popular para fazer requisições HTTP. Entender suas diferenças ajuda na escolha da ferramenta certa para seu projeto. Ambos têm suas forças, e a escolha muitas vezes depende dos requisitos do projeto e da preferência do desenvolvedor.

Axios oferece mais recursos nativos, como análise automática de JSON e interceptores, que podem simplificar o desenvolvimento para aplicações complexas. No entanto, a API Fetch do Node.js nativa oferece uma solução leve, compatível com padrões, sem dependências adicionais, tornando-se uma excelente opção para casos de uso mais simples ou quando minimizar o tamanho do pacote é uma prioridade. Por exemplo, um relatório recente da Cloudflare indica que as solicitações HTTP continuam sendo uma parte significativa do tráfego na web, com otimizações nas chamadas da API impactando diretamente o desempenho [1]. Isso destaca a importância de escolher um método eficiente para solicitações HTTP.

Estudos de Caso e Cenários de Aplicação

A versatilidade da API Fetch do Node.js se estende a inúmeras aplicações do mundo real. Aqui estão alguns cenários onde ela se mostra inestimável:

Cenário 1: Construindo um Agregador de Dados do Lado do Servidor

Imagine que você está construindo um serviço de backend que agrega dados de várias APIs externas (por exemplo, clima, notícias, preços de ações) e apresenta uma visão unificada para o seu frontend. A API Fetch do Node.js é perfeita para isso. Você pode fazer solicitações simultâneas para diferentes endpoints, processar as respostas e combiná-las antes de enviá-las para o cliente. Essa abordagem é altamente eficiente para criar painéis ou aplicações ricas em dados.

async function aggregateData() {
  try {
    const [weatherRes, newsRes] = await Promise.all([
      fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London'),
      fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY')
    ]);

    const weatherData = await weatherRes.json();
    const newsData = await newsRes.json();

    console.log('Dados Agregados:', { clima: weatherData, noticias: newsData.articles.slice(0, 1) });
  } catch (error) {
    console.error('Erro ao agregar dados:', error);
  }
}

// aggregateData(); // Descomente para executar, requer chaves API válidas

Este exemplo demonstra Promise.all com a API Fetch do Node.js para buscar dados de forma concorrente, acelerando significativamente a agregação de dados.

Cenário 2: Implementando um Listener de Webhook

Webhooks são mensagens automatizadas enviadas de aplicativos quando algo acontece. Sua aplicação Node.js pode precisar atuar como um listener de webhook, recebendo solicitações POST de serviços como GitHub, Stripe ou um dispositivo IoT personalizado. A API Fetch do Node.js (ou melhor, o servidor HTTP subjacente) é crucial para lidar com solicitações recebidas, enquanto o fetch em si pode ser usado para responder a esses webhooks ou encaminhar dados para outros serviços.

// Este é um exemplo conceitual para um listener de webhook usando Express.js
// A API Fetch seria usada *dentro* deste listener para fazer solicitações externas.

// const express = require('express');
// const app = express();
// app.use(express.json());

// app.post('/webhook', async (req, res) => {
//   console.log('Webhook recebido:', req.body);
//   // Exemplo: Encaminhar dados para outro serviço usando a API Fetch
//   try {
//     const response = await fetch('https://another-service.com/api/data', {
//       method: 'POST',
//       headers: { 'Content-Type': 'application/json' },
//       body: JSON.stringify(req.body),
//     });
//     if (!response.ok) {
//       throw new Error(`Falha no encaminhamento: ${response.status}`);
//     }
//     console.log('Dados do webhook encaminhados com sucesso.');
//     res.status(200).send('Recebido');
//   } catch (error) {
//     console.error('Erro ao encaminhar webhook:', error);
//     res.status(500).send('Erro');
//   }
// });

// const PORT = process.env.PORT || 3000;
// app.listen(PORT, () => console.log(`Listener de webhook rodando na porta ${PORT}`));

Este exemplo conceitual ilustra como a API Fetch do Node.js pode ser integrada em um listener de webhook para processar e encaminhar dados, demonstrando seu papel na comunicação entre servidores.

Cenário 3: Scraping da Web Automatizado com Proxies

Para tarefas que exigem extração automatizada de dados de sites, a API Fetch do Node.js pode ser combinada com serviços de proxy para contornar limites de taxa ou restrições geográficas. Este é um caso de uso comum para pesquisa de mercado, monitoramento de preços ou agregação de conteúdo. Enquanto o fetch fornece a funcionalidade básica de solicitação, uma solução de proxy robusta é frequentemente necessária para operações de scraping em larga escala. O relatório anual do HTTP Archive mostra consistentemente a crescente complexidade das páginas da web, tornando a busca de dados eficiente crucial [2].

async function scrapeWithProxy() {

const proxyUrl = 'http://seu_ip_proxy:sua_porta_proxy'; // Substitua pelos seus detalhes de proxy
const targetUrl = 'https://example.com'; // Substitua pelo site alvo

try {
  // Nota: Usar um proxy com a API Fetch nativa em Node.js pode exigir
  // configuração de agentes globais ou o uso de uma biblioteca como 'https-proxy-agent'
  // Para simplicidade, este exemplo assume uma conexão direta ou um ambiente configurado.
  const response = await fetch(targetUrl, {
    // agent: new HttpsProxyAgent(proxyUrl) // Se estiver usando https-proxy-agent
  });

  if (!response.ok) {
    throw new Error(`Erro HTTP! status: ${response.status}`);
  }

  const html = await response.text();
  console.log('HTML raspado (primeiros 500 caracteres):', html.substring(0, 500));
} catch (error) {
  console.error('Erro ao raspar com o proxy:', error);
}

// scrapeWithProxy(); // Descomente para executar, requer configuração de proxy

Esse cenário destaca o potencial da API Fetch do Node.js na raspagem da web, especialmente quando aumentada com configurações de proxy para maior anonimato e acesso.

Recomendar Scrapeless

Embora a API Fetch do Node.js seja excelente para requisições HTTP gerais, tarefas complexas de raspagem da web e aquisição de dados frequentemente exigem capacidades mais avançadas, como lidar com CAPTCHAs, gerenciar proxies, renderizar JavaScript e lidar com medidas de anti-bot. Para essas necessidades especializadas, recomendamos fortemente explorar Scrapeless. Scrapeless é um serviço poderoso projetado para simplificar a raspagem da web, fornecendo uma infraestrutura robusta que lida com essas complexidades para você. Ele permite que os desenvolvedores se concentrem na lógica de extração de dados em vez dos desafios de infraestrutura, tornando-o uma ferramenta inestimável para projetos de dados em larga escala. Seja para raspar dados de produtos de e-commerce, monitorar resultados de motores de busca ou coletar insights de mídia social, o Scrapeless oferece soluções personalizadas que se integram perfeitamente aos seus fluxos de trabalho existentes. Por exemplo, sua API de Raspagem e API de Raspagem Universal são projetadas para lidar com conteúdo dinâmico e fornecer dados limpos e estruturados. Para necessidades específicas como dados de pesquisa do Google ou dados de e-commerce, o Scrapeless oferece soluções otimizadas que vão além do que uma implementação básica da API Fetch do Node.js pode alcançar sozinha. Sua plataforma também oferece soluções para raspagem de mídia social e ferramentas para desenvolvedores para ajudar ainda mais em sua jornada de aquisição de dados.

Conclusão

A API Fetch do Node.js fornece uma maneira moderna, eficiente e padronizada de realizar requisições HTTP, tornando-a uma ferramenta indispensável para qualquer desenvolvedor Node.js. Desde operações básicas de GET e POST até lidar com cenários complexos como timeouts, uploads de arquivos e respostas em streaming, a API Fetch oferece um conjunto abrangente de recursos. Sua integração nativa no Node.js v18+ simplifica ainda mais o desenvolvimento, eliminando dependências externas. Embora se destaque em muitas áreas, entender suas limitações e saber quando alavancar ferramentas especializadas como Scrapeless para tarefas mais exigentes é fundamental para construir aplicações verdadeiramente robustas e escaláveis. Aproveite o poder da API Fetch do Node.js para aprimorar as capacidades de interação com os dados de sua aplicação.

Pronto para simplificar seus esforços de aquisição de dados e raspagem da web? Inscreva-se no Scrapeless hoje!

FAQ

Q1: Qual é a principal vantagem de usar a API Fetch nativa no Node.js em comparação com bibliotecas externas?

A principal vantagem é que a API Fetch nativa do Node.js é incorporada diretamente no runtime do Node.js (a partir da versão 18), o que significa que você não precisa instalar pacotes externos como node-fetch ou axios. Isso reduz as dependências do projeto, simplifica a configuração e pode resultar em tamanhos de aplicativo menores. Também fornece uma API consistente para fazer requisições HTTP em ambientes de navegador e servidor, o que é benéfico para desenvolvedores JavaScript de pilha completa.

Q2: Como a API Fetch lida com erros em comparação com o Axios?

O tratamento de erros da API Fetch do Node.js difere do Axios. A promessa fetch() da API Fetch só é rejeitada em erros de rede (por exemplo, sem conexão com a internet, falha na resolução de DNS). Para erros HTTP (como 404 Não Encontrado ou 500 Erro Interno do Servidor), a promessa ainda é resolvida, mas a propriedade response.ok será false. Você deve verificar explicitamente response.ok para determinar se a requisição foi bem-sucedida. Em contraste, o Axios rejeita automaticamente a promessa para qualquer código de status HTTP fora da faixa de 2xx, simplificando o tratamento de erros para muitos desenvolvedores.

Q3: Posso usar a API Fetch para fazer upload de arquivos no Node.js?

Sim, você pode usar a API Fetch do Node.js para fazer upload de arquivos. Normalmente, você faz isso criando um objeto FormData e anexando seu arquivo (ou conteúdo simulado do arquivo) a ele. Quando você passa o objeto FormData como o body da sua requisição fetch, a API define automaticamente o cabeçalho Content-Type para multipart/form-data, que é o padrão para uploads de arquivos. Isso torna simples enviar dados binários ou envios de formulários complexos.

Q4: Quais são algumas armadilhas comuns ao usar a API Fetch no Node.js?

As armadilhas comuns incluem esquecer de verificar response.ok para status de erro HTTP, não lidar com erros de rede com um bloco .catch(), e problemas com CORS (Compartilhamento de Recursos entre Diferentes Origens) ao fazer requisições para diferentes domínios (embora isso seja mais comum em ambientes de navegador, pode surgir em configurações específicas do Node.js). Além disso, gerenciar cookies pode ser mais complexo com a API Fetch em comparação com algumas bibliotecas de terceiros, já que seu comportamento é baseado nos padrões do navegador.

Q5: A API Fetch é adequada para raspagem da web no Node.js?

Sim, a API Fetch do Node.js pode ser usada para tarefas básicas de raspagem da web, especialmente para buscar conteúdo HTML estático. No entanto, para necessidades de raspagem mais avançadas, como renderizar páginas pesadas em JavaScript, contornar CAPTCHAs, gerenciar grandes pools de proxies ou lidar com mecanismos sofisticados de proteção contra bots, a API Fetch nativa sozinha pode não ser suficiente. Nesses casos, ferramentas e serviços especializados como Scrapeless são frequentemente mais eficazes, pois fornecem infraestrutura e recursos dedicados para lidar com essas complexidades.

Referências

1. Blog do Cloudflare - Introduzindo insights sobre o tráfego de requisições HTTP no Cloudflare Radar
2. The HTTP Archive - Relatório: Estado da Web
3. MDN Web Docs - Usando a API Fetch