Axios: interceptadores e URL base
Crie uma instância do Axios com uma baseURL, anexe tokens de autenticação em interceptadores de solicitação e trate erros 4xx/5xx em interceptadores de resposta.
Axios: interceptadores e URL base é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que usar Axios?
Axios é um cliente HTTP popular baseado em XMLHttpRequest. Ele adiciona: JSON automático, interceptadores de requisição e resposta, configuração de baseURL, tempo limite e identificadores de cancelamento de requisições. Muitas equipes ainda o preferem ao fetch.
Instalando o Axios
Instale via npm. O pacote para o navegador tem cerca de 14 KB compactados com gzip.
npm install axiosGET e POST básicos
Axios converte automaticamente corpos JSON em strings e interpreta automaticamente respostas JSON; não são necessárias chamadas manuais a JSON.stringify ou .json().
import axios from 'axios';
const { data } = await axios.get('/api/users');
console.log(data); // already parsed
const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);Criando uma instância do Axios
Crie uma instância configurada para a sua API, evitando repetir a URL base, os cabeçalhos e o tempo limite em cada chamada.
import axios from 'axios';
export const api = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
});
// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });Interceptador de requisição: token de autenticação
Adicione o token de autenticação a cada requisição sem repetir código.
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});Interceptador de resposta: erros globais
Centralize o tratamento de erros para todas as respostas: redirecione em caso de 401, mostre uma notificação breve em caso de 5xx etc.
api.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
window.location.href = '/login';
}
if (error.response?.status >= 500) {
toast.error('Server error. Please try again.');
}
return Promise.reject(error);
}
);Atualização do token em caso de 401
Use um interceptador de resposta para detectar 401, atualizar o token e repetir a requisição original de forma transparente.
api.interceptors.response.use(null, async (error) => {
const originalRequest = error.config;
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const newToken = await refreshToken();
localStorage.setItem('token', newToken);
originalRequest.headers.Authorization = `Bearer ${newToken}`;
return api(originalRequest); // retry
}
return Promise.reject(error);
});Parâmetros de URL e consulta
Axios aceita um objeto params — ele é serializado automaticamente em uma string de consulta.
const { data } = await api.get('/search', {
params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2Tempos limite
Defina um tempo limite para uma requisição e evite ficar aguardando um servidor lento.
api.get('/slow-endpoint', { timeout: 5000 })
.catch(err => {
if (err.code === 'ECONNABORTED') {
console.log('Request took too long');
}
});Cancelamento de requisições
Use AbortController (Axios moderno) ou um CancelToken (API antiga).
const controller = new AbortController();
api.get('/big-data', { signal: controller.signal })
.catch(err => {
if (axios.isCancel(err)) console.log('cancelled');
});
controller.abort();Estrutura do objeto de erro
Os erros do Axios têm error.response (o servidor respondeu com um status de erro), error.request (nenhuma resposta foi recebida) ou nenhum dos dois (a configuração da requisição falhou).
Axios vs Fetch — quando escolher
Axios: API mais limpa, interceptadores integrados e tratamento de erros mais simples. Fetch: nativo, pacote menor e suporte moderno a streaming. Projetos novos costumam escolher fetch + uma camada fina; projetos existentes com Axios raramente migram.
Verificação rápida
Qual recurso do Axios permite adicionar um cabeçalho Authorization a todas as requisições sem modificar cada chamada individual?
Recapitulação: Axios
axios.create() para instâncias configuradas com baseURL e timeout. Respostas JSON analisadas automaticamente (res.data). Interceptadores de requisição anexam tokens; interceptadores de resposta tratam erros e atualizam tokens. Use um objeto params para strings de consulta. Use AbortController para cancelamento. Escolha Axios pela simplicidade; use fetch + uma camada fina para obter um pacote menor.
Perguntas Frequentes
A aula “Axios: interceptadores e URL base” é grátis?
Sim — o texto completo de “Axios: interceptadores e URL base” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Axios: interceptadores e URL base”?
Crie uma instância do Axios com uma baseURL, anexe tokens de autenticação em interceptadores de solicitação e trate erros 4xx/5xx em interceptadores de resposta. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Axios: interceptadores e URL base”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- API Fetch: GET POST PUT DELETE
- Axios: interceptadores e URL base
- Tratamento de erros: códigos de estado HTTP
- SWR e React Query para armazenamento em cache de dados