Introdução (3 min)

Bem-vindos, futuros arquitetos digitais! Imagine que você está em um restaurante sofisticado. Você escolhe seu prato do cardápio, mas não vai diretamente à cozinha para pegá-lo. Você faz o pedido a um garçom. O garçom, então, vai até a cozinha, pega seu prato e o traz de volta para você. Em nosso universo de desenvolvimento web, as APIs (Interfaces de Programação de Aplicações) são como essas cozinhas, repletas de dados e funcionalidades, e nós, desenvolvedores, precisamos de “garçons” para nos ajudar a buscar ou enviar informações para elas.

Esta analogia é fundamental para entendermos a importância de bibliotecas e funções que nos permitem fazer requisições HTTP, ou seja, interagir com essas cozinhas digitais. Em um mundo onde a integração entre diferentes sistemas é a espinha dorsal de qualquer aplicação moderna, saber como fazer essas chamadas de forma eficiente e robusta é absolutamente vital.

Nesta décima segunda aula, vamos mergulhar em uma comparação prática entre dois dos “garçons” mais populares no ecossistema JavaScript para realizar essas requisições: o Fetch API nativo e a biblioteca Axios. Você vai aprender a utilizar ambos para consumir uma API RESTful, entendendo suas nuances e escolhendo a ferramenta certa para cada cenário. Nosso foco será no contexto do Node.js e Express, construindo um servidor simples que, por sua vez, fará requisições para outro serviço, simulando um ambiente de produção real.

Conceito Fundamental (7 min)

Para interagir com APIs, precisamos de um mecanismo para enviar e receber dados via protocolo HTTP. No JavaScript moderno, temos duas abordagens predominantes no lado do cliente (navegador) e, cada vez mais, no lado do servidor (Node.js): a Fetch API e a biblioteca Axios.

Fetch API: O Padrão Nativo

O Fetch API é uma interface nativa dos navegadores modernos e, a partir de versões recentes do Node.js, também está disponível globalmente. Ele fornece uma maneira poderosa e flexível de fazer requisições de rede. O Fetch retorna uma Promise, o que significa que ele opera de forma assíncrona, não travando a execução do seu código enquanto aguarda a resposta da rede.

Terminologia Correta: Quando falamos de Fetch, estamos nos referindo a uma interface global que representa requisições e respostas de recursos de rede. Ela trabalha com Request e Response objects, e seu uso mais comum é através da função global fetch().
Casos de Uso Reais: Perfeito para aplicações web que precisam de baixo overhead de dependências externas, pois já vem “de fábrica”. Também é excelente para cenários onde você precisa de controle granular sobre a requisição e resposta, como manipulação de streams de dados.
Integração com Outras Tecnologias: Integra-se perfeitamente com async/await, tornando o código assíncrono mais legível. Por ser nativo, não há preocupações com compatibilidade de pacotes.
Vantagens:
- Nativo: Não exige instalação de bibliotecas externas, o que minimiza o tamanho do bundle.
- Moderno: Utiliza Promises por padrão, facilitando a programação assíncrona.
- Flexível: Permite construir objetos Request e Response personalizados.

Desvantagens:
- Tratamento de Erros: Não rejeita a Promise em caso de erro HTTP (códigos 4xx ou 5xx). É preciso verificar response.ok manualmente.
- Timeout: Não possui uma opção nativa para timeout de requisição, necessitando de um AbortController para implementar essa funcionalidade.
- Parsing JSON: Exige um passo extra (response.json()) para parsear o corpo da resposta.

Axios: A Biblioteca Robusta

O Axios é uma biblioteca de cliente HTTP baseada em Promises para o navegador e Node.js. Ele é amplamente utilizado devido à sua interface amigável e recursos adicionais que simplificam o desenvolvimento. Para usá-lo, é preciso instalá-lo como uma dependência do seu projeto.

Terminologia Correta:Axios é um pacote npm que oferece um conjunto de funcionalidades para realizar requisições HTTP, incluindo interceptores, transformadores e cancelamento de requisições.
Casos de Uso Reais: Ideal para aplicações enterprise que requerem funcionalidades avançadas, como tratamento global de erros, interceptação de requisições para adicionar tokens de autenticação ou logs, e um controle mais simplificado de cenários complexos de requisição.
Integração com Outras Tecnologias: Assim como Fetch, funciona de maneira esplêndida com async/await. Sua natureza de Promise facilita a integração em pipelines de dados e fluxos de trabalho assíncronos.
Vantagens:
- Tratamento de Erros Aprimorado: Rejeita a Promise automaticamente para códigos de status HTTP 4xx e 5xx, simplificando o controle de fluxo.
- Auto-parsing JSON: Automaticamente transforma as respostas JSON em objetos JavaScript.
- Interceptors: Permite interceptar requisições e respostas globalmente, útil para adicionar cabeçalhos de autenticação ou logs.
- Timeout Integrado: Possui uma opção de configuração simples para timeout.
- API Consistente: Oferece uma API mais homogênea e intuitiva.

Desvantagens:
- Dependência Externa: Precisa ser instalado via npm, aumentando o tamanho do projeto.
- Curva de Aprendizagem: Embora simples, tem mais opções de configuração que o Fetch básico.

Em resumo, enquanto Fetch é o padrão nativo e leve, Axios oferece uma experiência de desenvolvedor mais completa e com recursos para aplicações de grande porte. A escolha entre eles muitas vezes se resume às necessidades específicas do seu projeto e ao nível de controle e conveniência que você busca.

Implementação Prática (10 min)

Vamos desenvolver um pequeno servidor Express que simula um “gateway”. Ele terá um endpoint que, ao ser acessado, fará uma requisição a uma API externa (vamos simular uma API de posts públicos) usando tanto Fetch quanto Axios para comparar suas implementações.

Preparação do Ambiente

Primeiro, crie uma pasta para o seu projeto e inicialize o Node.js. Instale as dependências necessárias.


mkdir axios-vs-fetch-aula
cd axios-vs-fetch-aula
npm init -y
npm install express axios

No HostGator Plano M, você normalmente faria o upload desses arquivos via FTP e iniciaria a aplicação via SSH ou painel de controle, garantindo que o port configurado no seu Node.js esteja de acordo com o que o HostGator espera (geralmente process.env.PORT ou uma porta específica como 3000 ou 8000, que é redirecionada pelo servidor web).

Código Funcional COMPLETO

Crie um arquivo chamado app.js (ou server.js) e insira o seguinte código:


// Importa o módulo Express para criar e gerenciar nosso servidor web.
const express = require('express');
// Importa o Axios, uma biblioteca cliente HTTP baseada em Promises, para fazer requisições.
const axios = require('axios');
// Cria uma instância da aplicação Express.
const app = express();
// Define a porta em que o servidor irá escutar.
// Usamos process.env.PORT para compatibilidade com ambientes de hospedagem como HostGator.
const PORT = process.env.PORT || 3000;
// Middleware para processar JSON no corpo das requisições. Essencial para APIs REST.
app.use(express.json());
// URL da API externa que vamos consumir. Usaremos uma API pública para posts.
const EXTERNAL_API_URL = 'https://jsonplaceholder.typicode.com/posts';
/* @route GET /dados-posts-fetch
  @description Rota para obter dados de posts usando Fetch API.
  @returns {Array} Retorna uma lista de posts.
  @error {Object} Retorna um objeto de erro em caso de falha.
 /
app.get('/dados-posts-fetch', async (req, res) => {
    console.log('[LOG] Requisição recebida em /dados-posts-fetch');
    try {
        // Realiza a requisição GET usando Fetch API.
        // O Fetch API é nativo no Node.js v18+ ou com um polyfill para versões anteriores.
        const response = await fetch(EXTERNAL_API_URL);
        // A Fetch API não lança erro para status HTTP 4xx/5xx, precisamos verificar response.ok.
        if (!response.ok) {
            // Se a resposta não for OK (status 200-299), lança um erro com o status.
            throw new Error(Erro HTTP: Status ${response.status} - ${response.statusText});
        }
        // Converte o corpo da resposta para JSON. Este é um passo extra no Fetch.
        const data = await response.json();
        // Log para auditoria e depuração.
        console.log([LOG] Dados obtidos com Fetch: ${data.length} posts.);
        // Envia os dados como resposta da nossa API.
        res.status(200).json({
            message: 'Dados de posts obtidos com sucesso usando Fetch!',
            source: 'Fetch API',
            data: data
        });
    } catch (error) {
        // Tratamento de erros. Loga o erro e envia uma resposta de erro ao cliente.
        console.error([ERRO] Falha ao obter dados com Fetch: ${error.message});
        res.status(500).json({
            message: 'Ocorreu um erro ao buscar os posts com Fetch API.',
            error: error.message
        });
    }
});
/* @route GET /dados-posts-axios
  @description Rota para obter dados de posts usando Axios.
  @returns {Array} Retorna uma lista de posts.
  @error {Object} Retorna um objeto de erro em caso de falha.
 /
app.get('/dados-posts-axios', async (req, res) => {
    console.log('[LOG] Requisição recebida em /dados-posts-axios');
    try {
        // Realiza a requisição GET usando Axios.
        // Axios automaticamente lança um erro para status HTTP 4xx/5xx.
        // Axios também automaticamente parseia a resposta JSON (response.data).
        const response = await axios.get(EXTERNAL_API_URL);
        // Os dados já estão disponíveis diretamente em response.data.
        const data = response.data;
        // Log para auditoria e depuração.
        console.log([LOG] Dados obtidos com Axios: ${data.length} posts.);
        // Envia os dados como resposta da nossa API.
        res.status(200).json({
            message: 'Dados de posts obtidos com sucesso usando Axios!',
            source: 'Axios',
            data: data
        });
    } catch (error) {
        // Tratamento de erros. Axios facilita o acesso a detalhes do erro.
        if (axios.isAxiosError(error)) {
            // Se for um erro do Axios, podemos acessar error.response para detalhes HTTP.
            console.error([ERRO AXIOS] Status: ${error.response ? error.response.status : 'N/A'}, Mensagem: ${error.message});
            res.status(error.response ? error.response.status : 500).json({
                message: 'Ocorreu um erro ao buscar os posts com Axios.',
                error: error.response ? error.response.data : error.message
            });
        } else {
            // Erros que não são do Axios.
            console.error([ERRO GERAL] Falha ao obter dados com Axios: ${error.message});
            res.status(500).json({
                message: 'Ocorreu um erro inesperado ao buscar os posts com Axios.',
                error: error.message
            });
        }
    }
});
// Endpoint de teste simples para verificar se o servidor está ativo.
app.get('/', (req, res) => {
    res.status(200).send('Servidor de Comparação Axios vs Fetch rodando!');
});
// Inicia o servidor Express na porta definida.
app.listen(PORT, () => {
    console.log(Servidor rodando na porta ${PORT});
    console.log(Acesse: http://localhost:${PORT});
    console.log(Teste Fetch: http://localhost:${PORT}/dados-posts-fetch);
    console.log(Teste Axios: http://localhost:${PORT}/dados-posts-axios);
});

Comentários Detalhados e Melhores Práticas

Organização do Código: Mantemos o código em um único arquivo para esta aula básica, mas em um projeto enterprise, dividiríamos em módulos (e.g., rotas em routes/, controladores em controllers/).
Logging Profissional: Usamos console.log e console.error para uma visibilidade básica do que está acontecendo na aplicação. Em um ambiente de produção, substituiríamos por uma biblioteca de logging mais robusta como Winston ou Pino.
Tratamento de Erros Robusto:
- Para Fetch: É imprescindível verificar response.ok, pois um status HTTP 4xx ou 5xx não rejeita a Promise. Lançamos um erro manualmente para unificar o tratamento no catch.
- Para Axios: Ele lida com erros HTTP de forma mais elegante, rejeitando a Promise automaticamente. Usamos axios.isAxiosError(error) para diferenciar erros de rede de outros tipos de erro, o que é uma prática excelente.

Configurações HostGator Plano M: A linha const PORT = process.env.PORT || 3000; é vital. No HostGator, o ambiente de execução Node.js geralmente injeta a porta via process.env.PORT. Se não houver, ele usa 3000 como fallback, ideal para desenvolvimento local.
Validação de Entrada: Embora não seja diretamente para Axios/Fetch, nosso servidor Express está configurado para receber JSON (app.use(express.json())). Se estivéssemos recebendo dados do usuário, implementaríamos validação com bibliotecas como Joi ou Express-validator.

Testes Básicos

Para testar o servidor, execute-o no terminal:


node app.js

Você verá as mensagens de inicialização do servidor. Então, abra seu navegador ou use uma ferramenta como Postman/Insomnia e acesse:

http://localhost:3000/: Deve retornar “Servidor de Comparação Axios vs Fetch rodando!”
http://localhost:3000/dados-posts-fetch: Deve retornar uma lista de posts obtida via Fetch.
http://localhost:3000/dados-posts-axios: Deve retornar uma lista de posts obtida via Axios.

Observe os logs no seu terminal enquanto faz as requisições para ver o fluxo de execução e as mensagens de sucesso ou erro.

Exercício Hands-On (5 min)

Desafio Prático

Seu desafio é criar um novo endpoint em nosso servidor Express, digamos /dados-usuarios, que faça uma requisição para a API de usuários públicos (https://jsonplaceholder.typicode.com/users). Implemente este endpoint usando ambos Fetch e Axios, mas encapsulando a lógica de requisição em funções separadas para promover a reutilização de código e a organização.

Crie uma função getUsersWithFetch() que utilize o Fetch API.
Crie uma função getUsersWithAxios() que utilize o Axios.
Crie um único endpoint /dados-usuarios que aceite um parâmetro de query (e.g., /dados-usuarios?cliente=fetch ou /dados-usuarios?cliente=axios) para decidir qual função usar. Se nenhum parâmetro for fornecido, use Axios por padrão.

Solução Detalhada Passo a Passo


// ... (código anterior do app.js) ...
const EXTERNAL_USERS_API_URL = 'https://jsonplaceholder.typicode.com/users';
/* Função para obter dados de usuários usando Fetch API.
  @returns {Array} Retorna uma lista de usuários.
  @throws {Error} Lança um erro em caso de falha na requisição.
 /
async function getUsersWithFetch() {
    console.log('[LOG] Buscando usuários com Fetch...');
    const response = await fetch(EXTERNAL_USERS_API_URL);
    if (!response.ok) {
        throw new Error(Erro HTTP Fetch: Status ${response.status});
    }
    return await response.json();
}

/ Função para obter dados de usuários usando Axios.
  @returns {Array} Retorna uma lista de usuários.
  @throws {Error} Lança um erro em caso de falha na requisição.
 /
async function getUsersWithAxios() {
    console.log('[LOG] Buscando usuários com Axios...');
    const response = await axios.get(EXTERNAL_USERS_API_URL);
    // Axios já lida com status de erro e parseia JSON, então 'response.data' é direto.
    return response.data;
}

/ @route GET /dados-usuarios
  @description Rota para obter dados de usuários, com opção de cliente (Fetch/Axios).
  @queryParam {string} cliente - 'fetch' ou 'axios'. Padrão é 'axios'.
  @returns {Array} Retorna uma lista de usuários.
  @error {Object} Retorna um objeto de erro em caso de falha.
 */
app.get('/dados-usuarios', async (req, res) => {
    const cliente = req.query.cliente ? req.query.cliente.toLowerCase() : 'axios'; // Padrão é Axios
    console.log([LOG] Requisição recebida em /dados-usuarios com cliente: ${cliente});
    try {
        let data;
        let source;
        if (cliente === 'fetch') {
            data = await getUsersWithFetch();
            source = 'Fetch API';
        } else if (cliente === 'axios') {
            data = await getUsersWithAxios();
            source = 'Axios';
        } else {
            return res.status(400).json({
                message: 'Parâmetro "cliente" inválido. Use "fetch" ou "axios".'
            });
        }
        console.log([LOG] Dados de usuários obtidos com ${source}: ${data.length} usuários.);
        res.status(200).json({
            message: Dados de usuários obtidos com sucesso usando ${source}!,
            source: source,
            data: data
        });
    } catch (error) {
        // Tratamento de erro unificado.
        console.error([ERRO] Falha ao obter dados de usuários: ${error.message});
        let statusCode = 500;
        let errorMessage = 'Ocorreu um erro ao buscar os usuários.';
        if (axios.isAxiosError(error)) {
            statusCode = error.response ? error.response.status : 500;
            errorMessage = error.response ? error.response.data : error.message;
        } else if (error.message.includes('Erro HTTP Fetch')) {
            statusCode = parseInt(error.message.match(/Status (\d+)/)[1]) || 500;
            errorMessage = error.message;
        }
        res.status(statusCode).json({
            message: errorMessage,
            error: error.message
        });
    }
});
// ... (fim do código anterior do app.js - app.listen) ...

Como Testar e Validar o Resultado

Reinicie o servidor Node.js (Ctrl+C e node app.js). Agora, você pode acessar os seguintes URLs:

http://localhost:3000/dados-usuarios: Deve usar Axios por padrão e retornar uma lista de usuários.
http://localhost:3000/dados-usuarios?cliente=fetch: Deve usar Fetch e retornar a mesma lista de usuários.
http://localhost:3000/dados-usuarios?cliente=axios: Deve usar Axios e retornar a mesma lista de usuários.
http://localhost:3000/dados-usuarios?cliente=invalido: Deve retornar um erro de “Parâmetro inválido”.

Verifique os logs no terminal para confirmar qual função (Fetch ou Axios) foi executada e se houve algum erro.

Troubleshooting dos Erros Mais Comuns

fetch is not defined: Se você estiver usando uma versão muito antiga do Node.js (anterior à 18), o fetch não será globalmente disponível. Atualize seu Node.js ou instale um polyfill como node-fetch (npm install node-fetch e adicione global.fetch = require('node-fetch'); no topo do seu arquivo).
Axios is not defined: Certifique-se de ter instalado o Axios (npm install axios) e que a linha const axios = require('axios'); está no topo do seu arquivo.
Erros de Conexão (ECONNREFUSED): Isso geralmente significa que a API externa que você está tentando acessar está offline ou o URL está incorreto. Verifique o URL https://jsonplaceholder.typicode.com/ no seu navegador para garantir que está funcionando.
Erro 500 no seu servidor: Pode indicar um problema no seu código de tratamento de Promises (async/await, .then().catch()) ou na lógica de extração de dados da resposta. Verifique os logs do console para a mensagem de erro detalhada.

Próximos Passos Sugeridos

Agora que você dominou a arte de fazer requisições HTTP com Fetch e Axios, o que vem a seguir?

Configuração de Instâncias Axios: Explore como criar instâncias personalizadas do Axios (axios.create()) para definir configurações base (URLs base, cabeçalhos, timeouts) que podem ser reutilizadas em toda a sua aplicação.
Interceptors Axios: Mergulhe nos interceptors do Axios para adicionar cabeçalhos de autenticação automaticamente, logar requisições ou lidar com erros de forma global antes que cheguem ao seu código de aplicação.
Tratamento de Cancelamento: Aprenda a cancelar requisições em andamento, seja com AbortController para Fetch ou CancelToken para Axios, o que é crucial em SPAs (Single Page Applications) para evitar condições de corrida ou requisições desnecessárias.
Testes Unitários de Requisições: Pratique a escrita de testes unitários para suas funções que fazem requisições, utilizando bibliotecas de mock como nock para Node.js ou jest-fetch-mock/moxios para simular as respostas da API externa.
Autenticação com Tokens: Integre a busca e o envio de tokens JWT (JSON Web Tokens) em suas requisições, um cenário muito comum em APIs seguras.

Com estas habilidades, você estará muito bem preparado para construir aplicações robustas e conectadas, capazes de interagir com qualquer serviço web disponível!

🚀 Pronto para a próxima aula?

Continue sua jornada no desenvolvimento de APIs e domine Node.js & Express!

📚 Ver todas as aulas

Leodario.com

Aula 12 – API JavaScript, Node.js e Express – Axios vs Fetch – Comparação prática