O Que o Axios Ainda Oferece em Relação ao Fetch

A Fetch API amadureceu significativamente. Está integrada em todos os navegadores modernos, disponível nativamente no Node.js desde a v18 através do Undici, e é capaz de lidar com JSON, cancelamento de requisições e streaming. Para muitas requisições de API no frontend, ela é genuinamente suficiente.

Então por que as equipas continuam a recorrer ao Axios? Não por hábito, mas porque o Axios ainda resolve problemas específicos da experiência do programador que o Fetch deixa por sua conta. É aqui que essa lacuna realmente se manifesta.

Axios vs Fetch: Onde Estão as Diferenças Reais

1. Tratamento de Erros HTTP que Funciona por Padrão

O Fetch só rejeita em caso de falha de rede. Uma resposta 404 ou 500 resolve com sucesso — tem de verificar response.ok você mesmo todas as vezes.

// Fetch — tem de verificar manualmente
const res = await fetch('/api/user');
if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
const data = await res.json();

// Axios — rejeita automaticamente em 4xx/5xx por padrão
const { data } = await axios.get('/api/user');

Em aplicações grandes com dezenas de endpoints, essa verificação manual torna-se em boilerplate repetitivo. O Axios elimina a maior parte disso por padrão.

2. Interceptors de Requisição e Resposta Integrados

Esta é a funcionalidade que a maioria dos programadores cita ao escolher o Axios. Os interceptors permitem anexar lógica — tokens de autenticação, logging, normalização de erros — uma única vez, globalmente, sem tocar em requisições individuais.

axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) redirectToLogin();
    return Promise.reject(error);
  }
);

Com o Fetch, pode simular isto envolvendo o fetch() numa função personalizada. Mas esse wrapper não é componível, não é empilhável, e é você que o tem de manter.

3. Configuração Partilhada com Instâncias do Axios

O Axios permite criar instâncias isoladas com base URLs, headers e timeouts predefinidos — um padrão genuinamente útil quando a sua aplicação comunica com múltiplas APIs.

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 8000,
  headers: { 'X-App-Version': '2.1.0' },
});

Replicar isto de forma limpa com Fetch requer uma classe wrapper ou uma factory function. É exequível, mas é mais escopo de que tem de tomar conta.

4. Acompanhamento do Progresso de Uploads

O Fetch ainda não tem uma API nativa padronizada de progresso de upload nos navegadores. O Axios expõe onUploadProgress diretamente, suportado por XMLHttpRequest por baixo nos navegadores.

await axios.post('/upload', formData, {
  onUploadProgress: e => {
    if (e.total) {
      console.log(`${Math.round((e.loaded / e.total) * 100)}%`);
    }
  },
});

Se precisa de progresso de upload numa configuração apenas com Fetch, terá de voltar ao XMLHttpRequest puro. Isso é uma regressão real.

5. Configuração de Timeout Sem o Boilerplate do AbortController

O Axios aceita uma opção timeout diretamente. O Fetch exige que configure manualmente AbortController e setTimeout — o que funciona, mas adiciona ruído.

// Axios
await axios.get('/api/data', { timeout: 5000 });

// Equivalente com Fetch
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 5000);
try {
  const res = await fetch('/api/data', { signal: controller.signal });
} finally {
  clearTimeout(id);
}

Os ambientes modernos também suportam AbortSignal.timeout(), que encurta isto consideravelmente, e o suporte nos navegadores já está amplamente disponível.

Comparação Rápida: Funcionalidades do Axios vs Fetch API

Conclusão

O Fetch não é inadequado. Para clientes HTTP JavaScript simples — alguns endpoints, sem lógica de autenticação partilhada, sem progresso de upload — é a escolha padrão correta. Sem dependências, sem overhead.

Mas o Axios merece o seu lugar quando as suas requisições de API no frontend crescem em complexidade. Interceptors, instâncias partilhadas, tratamento automático de erros e progresso de upload não são funcionalidades de que sentirá falta até precisar delas — e nessa altura vai querê-las integradas, e não construídas à mão. É isso que o Axios ainda lhe oferece.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.