axios

Descripción general

Axios es una librería basada en promesas que facilita el consumo de apis HTTP desde el navegador o desde node.js. Su sintaxis y diseño permiten una gestión clara de peticiones, respuestas, interceptores, y errores, mejorando la legibilidad y mantenimiento del código frente a fetch.

Documentación oficial: axios
Concepto de promesas: [Promise - JavaScript MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

Características principales

Soporte nativo para promesas (async/await o .then/.catch).
Permite configurar un cliente HTTP personalizado con cabeceras, baseURL y tiempos de espera.
Interceptores para manipular peticiones y respuestas globalmente (ideal para tokens JWT o logs).
Serialización automática de JSON.
Compatibilidad tanto con navegador como con node.js.
Cancelación de peticiones (útil para abortar llamadas en componentes desmontados en react o nextjs).
Soporte para transformaciones de datos antes y después de la respuesta.
Ideal para centralizar el estado o lógica de datos (similar a SWR o RTK Query).

Comparativa: axios vs fetch vs promises

| Característica | Axios | Fetch | Promises | |—————-|——–|——–|———–| | Basado en Promesas | ✅ | ✅ | ✅ | | Manejo automático de JSON | ✅ | ❌ (requiere .json()) | — | | Interceptores | ✅ | ❌ | — | | Cancelación de peticiones | ✅ | ✅ (AbortController) | — | | Configuración global | ✅ | ❌ | — | | Compatibilidad Node.js | ✅ | ⚠️ (limitada) | — | | Manejo de errores HTTP | ✅ | ❌ (no lanza error por 4xx/5xx) | — |

Conclusión: Axios ofrece una capa de abstracción más robusta que fetch, con mejor gestión de errores, configuraciones y cancelaciones, haciéndolo ideal para aplicaciones de Frontend y Backend modernos.

Uso básico

Ejemplo de solicitud GET

import axios from 'axios';

async function obtenerDatos() {
	try {
		const respuesta = await axios.get('https://api.ejemplo.com/usuarios');
		console.log(respuesta.data);
	} catch (error) {
		console.error('Error al obtener datos:', error);
	}
}

Ejemplo de solicitud POST

import axios from 'axios';

async function crearUsuario(usuario) {
	try {
		const respuesta = await axios.post('https://api.ejemplo.com/usuarios', usuario);
		console.log('Usuario creado:', respuesta.data);
	} catch (error) {
		console.error('Error al crear usuario:', error);
	}
}

Configuración avanzada

Instancia personalizada

Permite crear un cliente HTTP con configuraciones reutilizables (baseURL, headers, timeouts, etc.):

import axios from 'axios';

const api = axios.create({
	baseURL: 'https://api.miapp.com',
	timeout: 5000,
	headers: { 'Authorization': 'Bearer token' }
});

Interceptores

Los interceptores permiten interceptar peticiones o respuestas globalmente antes de ser manejadas.

api.interceptors.request.use(config => {
	console.log('Petición saliente:', config.url);
	return config;
}, error => Promise.reject(error));

api.interceptors.response.use(response => response.data, error => {
	if (error.response?.status === 401) {
		console.warn('No autorizado');
	}
	return Promise.reject(error);
});

Integración con SWR y nextjs

Axios se puede integrar fácilmente con SWR para optimizar el fetching de datos en aplicaciones nextjs:

import useSWR from 'swr';
import axios from 'axios';

const fetcher = url => axios.get(url).then(res => res.data);

export default function Usuarios() {
	const { data, error } = useSWR('/api/usuarios', fetcher);

	if (error) return <div>Error al cargar</div>;
	if (!data) return <div>Cargando...</div>;

	return (
		<ul>
			{data.map(usuario => <li key={usuario.id}>{usuario.nombre}</li>)}
		</ul>
	);
}

Casos de uso comunes

Consumo de APIs REST o GraphQL desde frontend o backend.
Manejo centralizado de tokens de autenticación.
Registro de logs de tráfico HTTP.
Implementación de reintentos automáticos con estrategias de backoff.
Integración con Redux Toolkit Query o TanStack Query.

Recursos relacionados

Comienza – SWR
HTTP
fetch
api
Backend
node.js
nextjs

axios - conceptos ampliados

Arquitectura y flujo interno

Axios se basa en un patrón de adaptadores que abstrae las diferencias entre entornos.

En el navegador usa XMLHttpRequest (XHR).
En Node.js usa el módulo nativo http/https.
Esto le permite mantener la misma API en ambos entornos, simplificando la compatibilidad full-stack.

El flujo básico:

Configuración → interceptores de petición → adaptador HTTP → respuesta → interceptores de respuesta → devolución de la promesa.

Adaptadores personalizados

Axios permite definir adaptadores propios para modificar la forma en que se envían las solicitudes (por ejemplo, para integrar con entornos IoT, WebSocket o servicios mock).

const customAdapter = async config => {
	console.log('Petición interceptada por adaptador:', config.url);
	return {
		data: { mensaje: 'Mocked' },
		status: 200,
		statusText: 'OK',
		headers: {},
		config
	};
};

const api = axios.create({ adapter: customAdapter });
api.get('/prueba').then(console.log);

Manejo de errores

Axios distingue entre distintos tipos de error:

Errores de red: desconexiones, timeouts, DNS, etc.
Errores HTTP: respuestas con status >= 400.
Errores de configuración: parámetros inválidos o adaptadores mal definidos.

axios.get('/endpoint')
	.catch(error => {
		if (error.response) console.error('Error HTTP:', error.response.status);
		else if (error.request) console.error('Error de red o sin respuesta');
		else console.error('Error de configuración:', error.message);
	});

Transformaciones de datos

Permite modificar datos antes de enviar o después de recibir la respuesta.

axios.post('/usuario', { nombre: 'Juan' }, {
	transformRequest: [(data) => JSON.stringify({ ...data, activo: true })],
	transformResponse: [(data) => JSON.parse(data).usuario]
});

Cancelación y control de concurrencia

La API moderna usa AbortController para cancelar peticiones, lo que evita fugas de memoria en componentes desmontados.

const controller = new AbortController();
axios.get('/lento', { signal: controller.signal });
controller.abort(); // cancela la solicitud

También es posible implementar colas o límites de concurrencia, ideal para sistemas con alto tráfico.

Reintentos automáticos y backoff exponencial

Axios no tiene reintentos nativos, pero puede combinarse con estrategias personalizadas:

async function fetchConReintento(url, intentos = 3, delay = 1000) {
	for (let i = 0; i < intentos; i++) {
		try {
			return await axios.get(url);
		} catch (e) {
			if (i === intentos - 1) throw e;
			await new Promise(r => setTimeout(r, delay * (2 ** i)));
		}
	}
}

Axios y autenticación

Se integra fácilmente con esquemas de autenticación:

Bearer Tokens / JWT: usando interceptores.
Cookies y sesiones: configurando withCredentials: true.
OAuth2 / API Keys: agregando headers o parámetros automáticos.

api.interceptors.request.use(config => {
	const token = localStorage.getItem('jwt');
	if (token) config.headers.Authorization = `Bearer ${token}`;
	return config;
});

Integración con frameworks y ecosistemas

nextjs

En nextjs, Axios se puede usar tanto en el cliente como en el servidor (dentro de getServerSideProps o route handlers), compartiendo la misma lógica de fetching.

react

Ideal para hooks personalizados:

import { useState, useEffect } from 'react';
import axios from 'axios';

export function useAxios(url) {
	const [data, setData] = useState(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(null);

	useEffect(() => {
		const controller = new AbortController();
		axios.get(url, { signal: controller.signal })
			.then(res => setData(res.data))
			.catch(setError)
			.finally(() => setLoading(false));

		return () => controller.abort();
	}, [url]);

	return { data, loading, error };
}

express y Backend

Axios también puede actuar como cliente de microservicios en entornos node.js, conectando servicios internos o externos:

Comunicación entre APIs internas.
Solicitudes hacia servicios de terceros (Stripe, Google APIs, etc.).
Middleware que unifica peticiones antes de enviarlas al frontend.

Buenas prácticas

Centralizar la configuración en una instancia común.
Implementar interceptores para logs, métricas y control de errores.
Usar baseURL y timeout coherentes con el entorno (dev, staging, prod).
Evitar anidar promesas: siempre preferir async/await.
Manejar cancelaciones y reintentos para evitar saturación.

Ecosistema y extensiones útiles

axios-retry: reintentos automáticos con backoff configurable.
axios-cache-adapter: cachea respuestas HTTP en memoria o IndexedDB.
axios-mock-adapter: mocking de endpoints para tests o desarrollo.
axios-hooks: integración directa con React.

Comparativa con otras librerías

Librería	Ventajas	Desventajas
Axios	Interceptores, compatibilidad Node/browser, cancelación, configuración global	Tamaño mayor que `fetch`
Fetch	Nativo, liviano, soporta Streams	Sin interceptores ni configuración global
Got	Ideal para node.js, soporte de reintentos y streaming	No apto para navegador
SWR / TanStack Query	Caché, revalidación automática	Dependen de un cliente como Axios o Fetch

Tópicos relacionados

HTTP
REST
fetch
promesas
SWR
nextjs
Backend
node.js
api
Middleware
Microservicios