Axios

Cliente HTTP simple basado en promesas para el navegador y Node.js

Para desarrollar aplicaciones web, el intercambio de datos entre el cliente y el servidor es una tarea fundamental. Para simplificar este proceso, existen numerosas herramientas y librerías que nos facilitan nuestra labor. Entre ellas, Axios es una de las librerías más populares para realizar solicitudes HTTP en Javascript, especialmente en entornos del navegador. A continuación, analizaremos su utilidad en comparación con la API nativa fetch, cómo se instala y un ejemplo de código para realizar solicitudes, además de otras características interesantes.

Principales características

1. Simplicidad y facilidad de uso: Axios proporciona una interfaz simple y fácil de entender para realizar peticiones HTTP. Su sintaxis clara y concisa simplifica la escritura de código.

2. Compatibilidad con promesas: Axios utiliza promesas, lo que permite un manejo eficiente y sencillo de las respuestas asincrónicas.

3. Soporte para Node y navegadores: Axios puede utilizarse tanto en el entorno del navegador como en Node.js, lo que lo hace versátil y adaptable a diferentes contextos de desarrollo.

4. Intercepción de solicitudes y respuestas: Ofrece la capacidad de interceptar solicitudes y respuestas para realizar tareas como la configuración de encabezados o el manejo de errores de manera centralizada.

¿Por qué Axios en vez de la API Fetch?

En el lado del servidor Axios usa el modulo nativo http de Node, mientras que en el lado del cliente (navegador) usa XMLHttpRequests en vez de la API fetch. Si bien la API fetch proporciona funcionalidades básicas para realizar solicitudes HTTP, Axios ofrece varias ventajas significativas:

• Compatibilidad con navegadores antiguos: Axios maneja automáticamente la conversión de datos (por ejemplo: puede interpretar directamente los resultados en formato JSON) y ofrece una compatibilidad más amplia con navegadores más antiguos en comparación con fetch.

• Manejo simplificado de errores: Axios simplifica el manejo de errores al permitir la captura centralizada de errores en un bloque catch, facilitando el proceso de depuración.

• Progreso de descarga Axios lleva de fábrica el soporte para conocer el progreso de una descarga, mientras que con Fetch debes implementar tu propia solución usando ReadableStream.

Instalación de Axios

Para utilizar Axios en un proyecto web, puedes instalarlo a través de npm, yarn,etc o incluirlo directamente desde un CDN en tu HTML.

Con npm:

npm install axios

Con yarn:

yarn add axios

Para incluirlo directamente en HTML:

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

Ejemplo de código de una petición GET

A continuación, un ejemplo básico de cómo realizar una solicitud GET utilizando Axios:

// Importar Axios si se está utilizando un entorno de módulos
// import axios from 'axios';

// Realizar una solicitud GET a una API
axios.get('https://api.example.com/data')
.then(function (response) {
  // Manejar la respuesta exitosa
  console.log('Datos recibidos:', response.data);
})
.catch(function (error) {
  // Manejar errores de solicitud
  console.error('Error al obtener datos:', error);
})
.finally(function () {
  // siempre sera executado
});

En este ejemplo, axios.get() realiza una solicitud GET a la URL proporcionada y maneja la respuesta exitosa o los errores a través de los bloques then y catch, respectivamente.

Interceptores

Los interceptores en Axios son funciones que se ejecutan antes de que se envíen las peticiones o después de recibir las respuestas. Estas funciones permiten la manipulación global de las peticiones y respuestas, lo que resulta útil para realizar acciones como modificar headers, manejar errores, autenticar peticiones, etc.

Aquí hay un ejemplo de cómo utilizar un interceptor para modificar los headers de las peticiones en Axios:

// Agregar un interceptor para modificar los headers de las peticiones
axios.interceptors.request.use(function (config) {
  // Agregar un encabezado personalizado a todas las peticiones
  config.headers['Authorization'] = 'Bearer token'; // Ejemplo: Autenticación con un token
  
  return config;
}, function (error) {
  // Manejar errores de solicitud
  return Promise.reject(error);
});

En este ejemplo, axios.interceptors.request.use se utiliza para añadir un interceptor que se ejecutará antes de que se envíe cualquier solicitud. En la función, se modifica el objeto config.headers para agregar un encabezado de autorización con un token. Esto se aplica a todas las solicitudes realizadas con Axios.

Gestión de errores

Axios proporciona una forma sencilla de manejar errores. Gestiona qué códigos son error directamente, sin que tengas que clasificarlos, por ejemplo:

axios.get('https://api.example.com/data')
.catch(function (error) {
  if (error.response) {
    // La respuesta fue hecha y el servidor respondió con un código de estado
    // que esta fuera del rango de 2xx
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // La petición fue hecha pero no se recibió respuesta
    // `error.request` es una instancia de XMLHttpRequest en el navegador y una instancia de
    // http.ClientRequest en node.js
    console.log(error.request);
  } else {
    // Algo paso al preparar la petición que lanzo un Error
    console.log('Error', error.message);
  }
    console.log(error.config);
});

Aunque también puedes configurarlo explícitamente usando la propiedad validateStatus:

axios.get('https://api.example.com/data', {
  validateStatus: function (status) {
    return status < 500; // Resuelve solo si el código de estado es menor que 500
  }
})

Conclusión

Axios es una librería muy complete, está bien mantenida y recibe actualizaciones regulares desde hace años. Es una buena opción para no tener que añadir funcionalidades extra encima de otras APIs de html5 como la API Fetch, lo que facilita realizar llamadas a servidores remotos en Javascript. Si deseas tener más información sobre esta librería puedes visitar su repositorio en GitHub, o su página oficial.