Fetch vs Axios

Fetch vs Axios: diferencias clave para entrevistas

Fetch y Axios son las dos formas más comunes de hacer peticiones HTTP en JavaScript. Ambas se basan en Promesas, pero se comportan de manera distinta en varios puntos que suelen preguntarse en entrevistas.

Fetch API

Fetch es la API nativa de los navegadores modernos. No requiere instalar nada.

Puntos clave:

• Nativo: No necesita dependencias externas.
• Doble Promesa: Devuelve una Promesa para la petición y otra para parsear el body (por ejemplo, .json()).
• No lanza error en respuestas HTTP fallidas: Fetch no ejecuta el catch si el servidor responde con 404 o 500. Solo entra en el catch si falla la red. Hay que validar response.ok manualmente.

// Petición GET con Fetch
fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Error en la red");
    }
    return response.json(); // Primer parseo manual
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("Falló:", error));

Axios

Axios es una librería de terceros muy popular. Usa XMLHttpRequest en navegadores y el módulo http de Node.js por debajo.

Puntos clave:

• Instalación: Requiere npm install axios o un CDN.
• Parseo automático: Transforma la respuesta a JSON sin necesidad de un .then extra.
• Manejo de errores: Rechaza la promesa automáticamente si el status HTTP está fuera del rango 2xx, así que el catch recibe los 404 y 500 directamente.
• Extras útiles: Timeouts nativos (timeout: 5000), cancelación de peticiones e interceptores (ideales para inyectar tokens de autenticación de forma global).

// Petición GET con Axios
axios
  .get("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    console.log(response.data); // Ya viene parseada
  })
  .catch((error) => console.error("Falló:", error)); // Captura 404 y 500 automáticamente

Comparativa rápida

¿Cuándo usar cada uno?

Elige Fetch si quieres mantener el proyecto sin dependencias externas o estás construyendo una aplicación sencilla.

Elige Axios si trabajas en una aplicación grande y estructurada, necesitas manejar muchos errores HTTP de forma limpia, requieres interceptores para tokens JWT, o necesitas configurar un timeout sin complicaciones.

© Arturo Juárez Monroy