Introdução (3 min)

Imagine que você precisa pedir comida. Você pode ligar para o restaurante (Fetch API) ou usar um aplicativo de delivery (Axios). Ambos cumprem o objetivo, mas o aplicativo oferece recursos adicionais, como rastrear o pedido e gerenciar pagamentos de forma mais eficiente.

Dominar a comunicação com APIs é essencial para construir aplicações web modernas. Nesta aula, vamos comparar Axios e Fetch API, duas maneiras populares de fazer requisições HTTP em JavaScript, e construir um pequeno projeto que demonstra suas diferenças na prática, utilizando Node.js e Express.

No contexto de Node.js/Express, tanto Axios quanto Fetch podem ser usados no front-end (no navegador) para interagir com seu servidor, ou no próprio back-end para consumir APIs externas.

Conceito Fundamental (7 min)

Tanto Axios quanto Fetch permitem que seu código JavaScript se comunique com servidores web e APIs, enviando e recebendo dados. Eles lidam com os detalhes da comunicação HTTP, como configurar cabeçalhos e lidar com diferentes métodos de requisição (GET, POST, PUT, DELETE, etc.).

Axios é uma biblioteca JavaScript externa, enquanto Fetch API é uma interface nativa embutida nos navegadores modernos e disponível no Node.js através de módulos como node-fetch. Axios simplifica requisições com recursos como interceptação de requisições, transformação de dados automática e cancelamento de requisições.

Casos de uso comuns incluem buscar dados de uma API REST, enviar dados de formulário para um servidor, ou fazer upload de arquivos. Ambas as tecnologias se integram perfeitamente com frameworks front-end como React, Angular e Vue.js.

Vantagens do Axios:

• Suporte a navegadores antigos.
• Transformação automática de dados JSON.
• Interceptação de requisições e respostas.
• Proteção contra CSRF.

Vantagens do Fetch:

• Nativo nos navegadores modernos.
• Mais leve (se não precisar de polyfill).
• Utiliza Promises nativamente.

Implementação Prática (10 min)

// Instale o Axios: npm install axios node-fetch
const express = require('express');
const axios = require('axios');
const fetch = require('node-fetch');

const app = express();
const port = 3000;
app.get('/axios', async (req, res) => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    res.json(response.data); // Axios já converte para JSON
  } catch (error) {
    console.error("Erro com Axios:", error); // Log de erro profissional
    res.status(500).json({ error: 'Erro ao buscar dados com Axios' }); // Error handling
  }
});
app.get('/fetch', async (req, res) => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json(); // Fetch requer conversão manual
    res.json(data); 
  } catch (error) {
    console.error("Erro com Fetch:", error); // Log de erro
    res.status(500).json({ error: 'Erro ao buscar dados com Fetch' }); // Tratamento de erro
  }
});
app.listen(port, () => console.log(Servidor rodando na porta ${port}));

Este código demonstra como usar Axios e Fetch para fazer uma requisição GET simples. Observe a diferença no tratamento da resposta: Axios converte automaticamente a resposta para JSON, enquanto com Fetch precisamos chamar response.json(). O código inclui tratamento de erros e logs para facilitar a depuração.

Exercício Hands-On (5 min)

Modifique o código para fazer uma requisição POST para https://jsonplaceholder.typicode.com/posts com os seguintes dados: title: 'foo', body: 'bar', userId: 1. Use tanto Axios quanto Fetch. Observe as diferenças na sintaxe.

Solução:

// ... (código anterior)

app.post('/axios-post', async (req, res) => {
    // ... (implementação com Axios)
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', { title: 'foo', body: 'bar', userId: 1});
});
app.post('/fetch-post', async (req, res) => {
    // ... (implementação com Fetch)
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1}),
        headers: { 'Content-Type': 'application/json' }
    });
});
// ... (restante do código)

Para testar, use um cliente REST como Postman ou Insomnia para enviar requisições POST para as rotas /axios-post e /fetch-post. Verifique se os dados foram enviados corretamente. Para solucionar erros, verifique o console do seu servidor e as mensagens de erro retornadas pelas APIs.

Próximos passos: Explore recursos avançados do Axios, como interceptadores e cancelamento de requisições. Experimente diferentes métodos HTTP e tipos de dados.