Axios

¿Qué es Axios?

Axios es un cliente HTTP popular para el navegador y Node.js, escrito en TypeScript. Proporciona una API moderna y conveniente para realizar solicitudes HTTP asíncronas. La biblioteca maneja automáticamente datos JSON, admite interceptores (interceptors), protección contra CSRF y cancelación de solicitudes.

¿Para qué sirve Axios?

A diferencia del fetch incorporado, Axios ofrece una sintaxis más intuitiva, transformación automática de datos y manejo de errores integrado. Es ideal para crear clientes de API REST, trabajar con autenticación y cargar archivos. Gracias al soporte de TypeScript, obtienes una tipificación estricta de todas las solicitudes y respuestas.

Instalación

Para instalar Axios en un proyecto, usa npm o yarn:

npm install axios# oyarn add axios

Para trabajar con TypeScript, instala los tipos (normalmente ya están incluidos):

npm install @types/axios

Funciones principales

• Soporte de todos los métodos HTTP: GET, POST, PUT, DELETE, PATCH y otros.
• Serialización automática de JSON: los datos se transforman automáticamente.
• Interceptores (interceptors): se pueden procesar solicitudes y respuestas globalmente (por ejemplo, para añadir tokens).
• Cancelación de solicitudes: usando CancelToken o AbortController.
• Carga de archivos: soporte de progreso de carga mediante onUploadProgress.
• Protección contra CSRF: trabajo automático con cookies y cabeceras.
• Tipificación: soporte completo de TypeScript con genéricos.

Ejemplo de código en TypeScript

Solicitud GET básica con tipificación de la respuesta:

import axios, { AxiosResponse } from 'axios';

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get(`/api/users/${id}`);  return response.data;}

// UsogetUser(1).then(user => console.log(user.name));

Ejemplo de solicitud POST con envío de datos:

import axios from 'axios';

interface CreateUserPayload {  name: string;  email: string;}

const newUser: CreateUserPayload = { name: 'John', email: 'john@example.com' };

axios.post('/api/users', newUser)  .then(response => console.log('User created:', response.data))  .catch(error => console.error('Error:', error));

Ejemplo con interceptor para añadir un token:

import axios from 'axios';

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

Cuándo usar Axios

Axios es ideal para:

• Crear aplicaciones cliente en React, Vue, Angular o Svelte.
• Servidores Node.js donde se necesite un cliente HTTP conveniente.
• Proyectos donde sea importante la tipificación estricta de TypeScript.
• Situaciones donde se necesiten interceptores, cancelación de solicitudes o progreso de carga.

Si usas fetch y deseas un código más conciso con manejo automático de errores, Axios será una excelente opción.