Axios: como hacerlo para desarrolladores

¿Qué es Axios ?

Axios es una librería cliente HTTP basada en promesas, diseñada para hacer peticiones asíncronas desde el navegador (utilizando XMLHttpRequest ) y Node.js (utilizando el módulo http nativo). Su naturaleza isomórfica permite utilizar el mismo código en ambos entornos, simplificando el desarrollo.

A diferencia de otras soluciones como fetch , Axios ofrece una API intuitiva y sencilla, manejando las respuestas de forma eficiente a través de promesas. Además, incluye características robustas para el manejo de errores y la interceptación de peticiones y respuestas.

Características Clave de Axios

• Basado en Promesas: Gestiona las peticiones HTTP de forma asíncrona y eficiente con el uso de promesas, facilitando la lectura y el manejo de errores.
• Interceptores: Permite interceptar tanto peticiones como respuestas para añadir funcionalidad adicional, como la autenticación o el registro de logs.
• Transformación de Datos: Facilita la transformación de datos de la petición y la respuesta, especialmente útil para trabajar con JSON.
• Cancelación de Peticiones: Ofrece la posibilidad de cancelar peticiones pendientes, evitando problemas de concurrencia y mejorando la experiencia del usuario.
• Soporte para Node.js y Navegadores: Funciona sin problemas en ambos entornos, lo que lo convierte en una solución versátil.
• Pequeño y Ligero: Tiene un tamaño mínimo, lo que reduce el tiempo de carga de la aplicación.
• Automatización de JSON: Transforma automáticamente las respuestas JSON.
• Protección contra XSRF: Ofrece mecanismos de protección contra ataques XSRF (Cross-Site Request Forgery).

Instalación de Axios

Axios se puede instalar fácilmente usando npm, yarn o bower:

• npm: npm install axios
• yarn: yarn add axios
• bower: bower install axios

También se puede incluir a través de un CDN, como jsDelivr o unpkg:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Métodos HTTP con Axios

Axios soporta todos los métodos HTTP estándar:

• axios.get(url, config)
• axios.post(url, data, config)
• axios.put(url, data, config)
• axios.delete(url, config)
• axios.head(url, config)
• axios.options(url, config)
• axios.patch(url, data, config)

Donde config es un objeto que permite configurar opciones adicionales como headers, parámetros, timeouts, etc.

Ejemplo de Uso de Axios

Aquí tienes un ejemplo sencillo de cómo realizar una petición GET con Axios :

axios.get('https://api.example.com/data') .then(response => { console.log(response.data); // Acceso a los datos de la respuesta }) .catch(error => { console.error(error); // Manejo de errores });

Manejo de Errores con Axios

Axios proporciona un mecanismo robusto para el manejo de errores. La promesa rechazada en la función .catch() contiene información detallada sobre el error, incluyendo el código de estado HTTP y un mensaje de error.

axios.get('https://api.example.com/data') .then(response => { // ... }) .catch(error => { if (error.response) { // La solicitud fue hecha y el servidor respondió con un código de estado que está fuera del rango de 2xx console.error('Error de respuesta:', error.response.data); console.error('Código de estado:', error.response.status); console.error('Headers de respuesta:', error.response.headers); } else if (error.request) { // La solicitud fue hecha pero no hubo respuesta del servidor console.error('No se recibió respuesta:', error.request); } else { // Algo ocurrió durante la configuración de la solicitud console.error('Error en la configuración:', error.message); } console.error('Configuración de la solicitud:', error.config); });

Interceptores de Axios

Los interceptores de Axios permiten añadir funcionalidad adicional antes y después de cada petición. Son ideales para tareas como la autenticación, la transformación de datos, o el registro de logs.

// Interceptor de peticiónaxios.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${token}`; // Añadir token de autenticación return config;});// Interceptor de respuestaaxios.interceptors.response.use(response => { return response;}, error => { if (error.response.status === 401) { // Manejar error de autenticación window.location.href = '/login'; } return Promise.reject(error);});

Axios vs. Fetch

Tanto Axios como fetch son populares para realizar peticiones HTTP, pero tienen algunas diferencias:

Conclusión

Axios es una librería potente y versátil para realizar peticiones HTTP en JavaScript. Su facilidad de uso, su manejo robusto de errores, y sus características adicionales como los interceptores lo convierten en una herramienta esencial para cualquier desarrollador web que necesite interactuar con APIs y servidores.