Cliente HTTP Axios para TypeScript

¿Qué es Axios?

Axios es un popular cliente HTTP basado en Promises para el navegador y Node.js, escrito en TypeScript. Proporciona una interfaz conveniente y potente para realizar solicitudes HTTP, soporta interceptores (interceptors), transformación automática de datos JSON y protección contra CSRF. La biblioteca es ideal para aplicaciones web modernas donde se requiere un trabajo flexible con REST API.

¿Para qué sirve Axios?

A diferencia del fetch incorporado, Axios analiza JSON automáticamente, maneja errores de estado HTTP (por ejemplo, 404 o 500) como excepciones, soporta la cancelación de solicitudes y barras de progreso de carga. Para proyectos TypeScript, Axios proporciona una tipificación estricta de respuestas y solicitudes, lo que simplifica el desarrollo y reduce la cantidad de errores. Si escribes en TypeScript y trabajas con API, Axios es la elección estándar.

Instalación

npm install axios

Para proyectos en TypeScript, los tipos ya están incluidos en el paquete, no es necesario instalar @types/axios adicionalmente.

Funciones principales

Soporte de todos los métodos HTTP: GET, POST, PUT, DELETE, PATCH y otros.
Transformación automática de datos: las respuestas se analizan automáticamente a JSON, y los objetos de solicitud se serializan.
Interceptores (interceptors): se puede agregar lógica antes de enviar una solicitud o después de recibir una respuesta (por ejemplo, para añadir un token de autorización).
Cancelación de solicitudes: a través de CancelToken o AbortController.
Tiempos de espera y progreso: configuración del tiempo de espera y seguimiento del progreso de carga/descarga.
Tipificación estricta: soporte de genéricos para tipificar el cuerpo de la respuesta.

Ejemplo de código en TypeScript

import axios, { AxiosResponse } from 'axios';

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

async function fetchUser(id: number): Promise<User> {  try {    const response: AxiosResponse<User> = await axios.get<User>(`https://api.example.com/users/${id}`);    return response.data;  } catch (error) {    if (axios.isAxiosError(error)) {      console.error('Axios error:', error.message);    } else {      console.error('Unexpected error:', error);    }    throw error;  }}

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

Cuándo usar Axios

Axios es ideal para cualquier proyecto en TypeScript que requiera interacción con servidores HTTP: desde SPA simples hasta aplicaciones de servidor complejas en Node.js. Es especialmente útil cuando se necesita un manejo avanzado de errores, serialización automática de datos o trabajo con múltiples API. Si usas React, Vue o Angular, Axios se integra fácilmente con ellos gracias al soporte de interceptores y cancelación de solicitudes.

La biblioteca tiene un mantenimiento activo, cuenta con una gran comunidad y se utiliza en miles de proyectos. Axios es una solución madura y estable que no requiere dependencias adicionales.