Axios: interceptores y URL base
Cree una instancia de Axios con una baseURL, adjunte tokens de autenticación en interceptores de solicitudes y gestione errores 4xx/5xx en interceptores de respuestas.
Axios: interceptores y URL base es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Por qué utilizar Axios
Axios es un cliente HTTP popular basado en XMLHttpRequest. Añade JSON automático, interceptores de solicitudes y respuestas, configuración de baseURL, tiempo de espera y tokens de cancelación de solicitudes. Muchos equipos todavía lo prefieren a fetch.
Instalación de Axios
Instálelo mediante npm. El bundle para el navegador ocupa aproximadamente 14 KB comprimido con gzip.
npm install axiosGET y POST básicos
Axios convierte automáticamente los cuerpos JSON en cadenas y analiza automáticamente las respuestas JSON; no es necesario llamar manualmente a JSON.stringify ni a .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);Creación de una instancia de Axios
Cree una instancia configurada para su API y evite repetir la URL base, los encabezados y el tiempo de espera en cada llamada.
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' });Interceptor de solicitudes: token de autenticación
Inyecte el token de autenticación en cada solicitud sin repetir código.
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});Interceptor de respuestas: errores globales
Centralice la gestión de errores para todas las respuestas: redirija en caso de 401, muestre una notificación en 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);
}
);Actualización del token tras un 401
Utilice un interceptor de respuestas para detectar un 401, actualizar el token y reintentar de forma transparente la solicitud original.
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 y query
Axios acepta un objeto params y lo serializa automáticamente como una cadena de consulta.
const { data } = await api.get('/search', {
params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2Tiempos de espera
Configure un tiempo de espera para evitar que la solicitud quede bloqueada ante un servidor lento.
api.get('/slow-endpoint', { timeout: 5000 })
.catch(err => {
if (err.code === 'ECONNABORTED') {
console.log('Request took too long');
}
});Cancelación de solicitudes
Utilice AbortController (Axios moderno) o un CancelToken (API antigua).
const controller = new AbortController();
api.get('/big-data', { signal: controller.signal })
.catch(err => {
if (axios.isCancel(err)) console.log('cancelled');
});
controller.abort();Estructura del objeto de error
Los errores de Axios tienen error.response (el servidor respondió con un estado de error), error.request (no se recibió ninguna respuesta) o ninguno de los dos (falló la configuración de la solicitud).
Axios frente a Fetch: cuándo elegir cada uno
Axios: API más limpia, interceptores integrados y manejo de errores más sencillo. Fetch: nativo, paquete final más pequeño y compatibilidad moderna con streaming. Los proyectos nuevos suelen elegir fetch + un wrapper; los proyectos existentes con Axios rara vez migran.
Comprobación rápida
¿Qué funcionalidad de Axios le permite añadir una cabecera Authorization a cada solicitud sin modificar cada llamada individual?
Resumen: Axios
Utilice axios.create() para crear instancias configuradas con baseURL y timeout. Las respuestas JSON se analizan automáticamente (res.data). Los interceptores de solicitudes adjuntan tokens; los interceptores de respuestas gestionan errores y actualizan tokens. Use el objeto params para las cadenas de consulta. Utilice AbortController para cancelar solicitudes. Elija Axios por su sencillez; fetch + wrapper si necesita un paquete final más pequeño.
Preguntas frecuentes
¿La lección «Axios: interceptores y URL base» es gratis?
Sí — el texto completo de «Axios: interceptores y URL base» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Axios: interceptores y URL base»?
Cree una instancia de Axios con una baseURL, adjunte tokens de autenticación en interceptores de solicitudes y gestione errores 4xx/5xx en interceptores de respuestas. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Axios: interceptores y URL base»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fetch API: GET POST PUT DELETE
- Axios: interceptores y URL base
- Manejo de errores: códigos de estado HTTP
- SWR y React Query para el almacenamiento en caché de datos