AULA 38
MÓDULO 4
APIs REST
⏱ 50 min
Consumindo APIs com fetch
fetch nativo: GET, POST, headers, body. Por que verificar res.ok. Cliente HTTP com Axios: interceptors e retry.
fetchAxiosasync/awaitheadersinterceptorscliente HTTP
fetch API
O fetch é a API nativa do browser (e do Node.js 18+) para fazer requisições HTTP. Retorna Promise, suporta async/await, e é a forma padrão de consumir APIs em JavaScript moderno.
node-fetch vs nativo
Node 18+ tem fetch nativo. Em versões anteriores, use node-fetch ou axios. Axios tem interceptors e transformações automáticas — mais adequado para apps grandes.Interceptores e cliente HTTP
Para aplicações reais, crie um cliente HTTP centralizado com configurações globais: base URL, headers de autenticação, interceptors para erros e logging.
retry automático
axios-retry ou fetch com retry manual são essenciais para produção. APIs externas falham — com retry, o erro temporário vira sucesso automático.
javascript
// fetch — consumindo API REST async function getUser(id) { const res = await fetch(`https://api.example.com/users/${id}`, { headers: { 'Authorization': `Bearer ${token}` } }) if (!res.ok) throw new Error(`HTTP ${res.status}`) return res.json() } // POST com body JSON async function createUser(data) { const res = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) return res.json() } // Cliente HTTP com Axios — configuração global const axios = require('axios') const api = axios.create({ baseURL: 'https://api.example.com', timeout: 5000 }) api.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${getToken()}` return config })
quiz · aula 38
Teste seus conhecimentos
0/3 respondidas
QUESTÃO 01
Por que verificar res.ok antes de fazer res.json()?
QUESTÃO 02
Qual header é necessário ao enviar JSON no body de um POST?
QUESTÃO 03
Quando usar Axios em vez de fetch nativo?
0/3