Además de la función nativa fetch(), existen varias bibliotecas de terceros disponibles para realizar solicitudes HTTP en JavaScript. Una de las bibliotecas más populares es Axios ( Documentación de Axios). Estas bibliotecas ofrecen características y beneficios adicionales que pueden simplificar el trabajo con APIs y mejorar la legibilidad del código.

¿Por qué usar Axios u otras bibliotecas en lugar de fetch() nativo?

Aunque la API fetch() es potente, presenta algunas limitaciones que bibliotecas de terceros como Axios resuelven:

• Análisis automático de JSON: Axios analiza automáticamente las respuestas JSON, mientras que con fetch() se debe llamar manualmente a response.json();
• Tiempos de espera: Axios permite establecer tiempos de espera para las solicitudes, lo cual no es compatible de forma nativa con fetch();
• Interceptores de solicitud y respuesta: Axios proporciona interceptores que permiten ejecutar funciones antes de enviar una solicitud o después de recibir una respuesta, útil para agregar tokens de autenticación o registrar solicitudes;
• Sintaxis más sencilla: Axios ofrece una sintaxis más simple y coherente para realizar solicitudes y manejar respuestas;
• Compatibilidad con navegadores antiguos: Axios incluye soporte para navegadores antiguos que pueden no ser totalmente compatibles con la API nativa fetch().

Uso básico de Axios

Axios proporciona una sintaxis sencilla para realizar solicitudes GET y POST. Devuelve Promises, al igual que fetch(), pero gestiona automáticamente algunas tareas repetitivas como el análisis de JSON.

Solicitud GET con Axios

Este ejemplo demuestra el uso de Axios para una solicitud GET. La función getPostWithAxios llama a axios.get() para obtener datos de un endpoint de API (/posts/1). Axios simplifica el proceso al analizar automáticamente la respuesta JSON, eliminando la necesidad de una llamada separada a .json(). El bloque try...catch gestiona cualquier error, mostrando ya sea el título de la publicación o un mensaje de error en el HTML.

Solicitud POST con Axios

Este ejemplo demuestra una solicitud POST utilizando Axios para enviar datos a una API. La función sendPostWithAxios llama a axios.post() con el endpoint de la API (/posts) y los datos para una nueva publicación, incluyendo title, body y userId. Axios envía automáticamente los datos como JSON, lo que simplifica el proceso. El bloque try...catch gestiona cualquier error, mostrando en el HTML el título de la publicación creada o un mensaje de error.

Manejo de errores con Axios

Axios proporciona un mecanismo sencillo para el manejo de errores. Si la solicitud falla (por ejemplo, por un problema de red o un error del servidor), Axios lanza automáticamente un error, que puede ser gestionado utilizando try...catch.

Este ejemplo demuestra el manejo de errores con Axios. La función getInvalidPost intenta obtener datos de un endpoint inexistente utilizando axios.get(). Cuando la solicitud falla, Axios lanza automáticamente un error. El bloque try...catch captura este error, mostrando el mensaje de error en el HTML.

Características adicionales y beneficios de Axios

Exploración de algunas características adicionales de Axios.

Interceptores de solicitudes y respuestas

Axios permite interceptar solicitudes y respuestas para modificarlas antes de que sean procesadas. Esto resulta útil para agregar tokens de autenticación, registrar solicitudes o gestionar errores globales.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Soporte de tiempo de espera

Axios permite establecer tiempos de espera para las solicitudes, lo que garantiza que la solicitud no quede colgada indefinidamente.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Manejo de errores simplificado

Axios lanza errores automáticamente cuando el estado de la respuesta está fuera del rango 2xx, por lo que se pueden gestionar los fallos de manera estandarizada.

Compatibilidad con navegadores

Axios funciona en todos los navegadores modernos y proporciona polyfills para navegadores antiguos, lo que lo convierte en una opción más versátil para algunos proyectos.