Cuando trabajas con JavaScript en el desarrollo web, una de las tareas más comunes es realizar peticiones HTTP para obtener o enviar datos a un servidor. A lo largo de los años han surgido varias formas de hacerlo, pero dos de las más populares hoy en día son Fetch API y Axios. Si te estás preguntando cuál de estas herramientas deberías usar, este post te guiará paso a paso para comparar sus características, ventajas, limitaciones y casos de uso, de manera que puedas tomar una decisión informada. Vamos allá con Fetch API vs. Axios:

Qué es Fetch API y cómo funciona

Fetch API es una función nativa de JavaScript que permite realizar peticiones HTTP de manera moderna y sencilla. A diferencia de la antigua XMLHttpRequest, Fetch está basada en promesas, lo que facilita la gestión de respuestas y errores de forma más limpia.

Un ejemplo básico de Fetch API sería:

fetch('https://api.ejemplo.com/datos')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

En este ejemplo:

• fetch realiza la petición.

• response.json() convierte la respuesta en formato JSON.

• then permite manejar los datos devueltos.

• catch captura cualquier error que ocurra durante la petición.

Fetch API es muy útil para aplicaciones modernas porque es nativa y no requiere instalar librerías externas, lo que reduce el peso de tu proyecto.

Qué es Axios y cómo funciona

Axios es una librería externa de JavaScript diseñada para realizar peticiones HTTP. Ofrece una sintaxis muy sencilla, gestión automática de JSON, y algunas funcionalidades adicionales que Fetch no proporciona de manera nativa.

Un ejemplo de Axios sería:

import axios from 'axios';

axios.get('https://api.ejemplo.com/datos')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Ventajas de Axios:

• Convierte automáticamente la respuesta a JSON, sin necesidad de llamar a response.json().

• Maneja errores HTTP más intuitivamente.

• Permite cancelar peticiones y configurar interceptores para modificar solicitudes y respuestas.

• Compatible con navegadores antiguos sin necesidad de polyfills.

Fetch API vs Axios: comparativa básica

Cuando analizamos Fetch API vs Axios, podemos comparar varios aspectos importantes:

Como ves, Fetch API es ligera y moderna, mientras que Axios ofrece más funcionalidades listas para usar. La elección depende del tipo de proyecto y de tus necesidades.

Manejo de errores en Fetch y Axios

Uno de los puntos más importantes al hacer peticiones HTTP es cómo manejar los errores. Con Fetch API, una petición puede completarse exitosamente desde el punto de vista de la red, pero devolver un error HTTP (como 404 o 500). Por eso debes comprobar manualmente:

fetch('https://api.ejemplo.com/datos')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Con Axios, este proceso es más sencillo:

axios.get('https://api.ejemplo.com/datos')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Error HTTP:', error.response.status);
    } else {
      console.error('Error de red:', error.message);
    }
  });

Axios detecta automáticamente los errores HTTP y los lanza en el bloque catch, lo que facilita el manejo de excepciones.

Cancelación de peticiones

En aplicaciones modernas, como interfaces de búsqueda en tiempo real, es importante poder cancelar peticiones HTTP previas si el usuario cambia de criterio.

• Fetch API utiliza AbortController:

const controller = new AbortController();
fetch('https://api.ejemplo.com/datos', { signal: controller.signal });
controller.abort(); // Cancela la petición

• Axios permite cancelarlas con un token de cancelación:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://api.ejemplo.com/datos', { cancelToken: source.token });
source.cancel('Petición cancelada');

Axios ofrece un método más sencillo y directo, mientras que Fetch requiere un poco más de configuración.

Soporte para navegadores

Otro punto a considerar en Fetch API vs Axios es la compatibilidad:

• Fetch API: es nativa en la mayoría de navegadores modernos, pero en Internet Explorer requiere polyfill.

• Axios: funciona en todos los navegadores, incluidos los antiguos, gracias a su implementación en JavaScript puro.

Si tu proyecto necesita soporte para navegadores antiguos, Axios puede ser la opción más segura.

Interceptors y personalización

Axios tiene la ventaja de incluir interceptors, que permiten interceptar y modificar solicitudes o respuestas antes de que sean procesadas:

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

Esto es muy útil para agregar autenticación, logging o manejo global de errores. Fetch API no ofrece esta funcionalidad de forma nativa, y tendrías que implementarla manualmente en cada petición.

Sintaxis y facilidad de uso

La sintaxis también puede influir en la decisión entre Fetch API vs Axios. Fetch API es más ligera, pero requiere más líneas de código para cosas que Axios hace automáticamente, como:

• Conversión de JSON

• Manejo de errores HTTP

• Configuración de cabeceras por defecto

• Cancelación de peticiones

Axios simplifica todo esto y suele ser más legible en proyectos grandes.

Cuándo usar Fetch API

Fetch API es recomendable si:

• Buscas una solución nativa sin añadir dependencias.

• Tu proyecto es pequeño o mediano.

• No necesitas interceptores ni cancelación compleja de peticiones.

• Quieres aprender y usar las promesas de JavaScript moderno.

Cuándo usar Axios

Axios es ideal si:

• Trabajas en un proyecto grande con muchas peticiones HTTP.

• Necesitas interceptores y manejo avanzado de cabeceras.

• Quieres simplificar la conversión de JSON y el manejo de errores.

• Buscas compatibilidad con navegadores antiguos.

Conclusión: Fetch API vs Axios

En resumen, Fetch API vs Axios no es una cuestión de cuál es mejor, sino de cuál se adapta mejor a tus necesidades:

• Fetch API: ligera, moderna, sin dependencias, ideal para proyectos simples o medianos.

• Axios: rica en funcionalidades, más cómoda para proyectos grandes, con mejor manejo de errores y compatibilidad.

Si estás empezando o quieres reducir el peso de tu proyecto, Fetch es suficiente. Si necesitas funcionalidad avanzada y facilidad de uso en proyectos complejos, Axios es probablemente la mejor elección.

Al final, la decisión entre Fetch API vs Axios depende del tamaño del proyecto, la compatibilidad que necesites y las funcionalidades que busques. Conocer ambas opciones te permite ser flexible y tomar decisiones informadas según cada caso.

Aprende sobre Desarrollo Web con la Ruta de Frogames Formación

Si te ha interesado lo que has leído en este post, te encantará saber que puedes profundizar en este tema y en todas las competencias esenciales del Desarrollo Web a través de la Ruta de Aprendizaje de Frogames Formación.

Esta ruta ha sido creada para quienes desean iniciarse desde cero y avanzar paso a paso hasta dominar las herramientas, lenguajes y frameworks que utilizan los profesionales del desarrollo web actual. Aprenderás de forma práctica y progresiva a crear sitios y aplicaciones modernas, rápidas y seguras que funcionen en cualquier dispositivo y navegador.

A lo largo del recorrido, descubrirás tecnologías fundamentales como HTML5, CSS3, JavaScript, React o bases de datos. También te adentrarás en conceptos clave como el consumo de APIs, la accesibilidad y las buenas prácticas de mantenimiento y despliegue. Todo ello con un enfoque práctico y orientado a resultados reales.

Cada módulo está diseñado para que pongas en práctica lo aprendido a través de proyectos reales, construyendo poco a poco un porfolio profesional que refleje tu capacidad para desarrollar aplicaciones web completas, bien estructuradas y listas para producción.

Si quieres transformar tu pasión por la tecnología en una carrera sólida y aprender a diseñar, programar y publicar sitios y aplicaciones web desde cero, la Ruta de Desarrollo Web de Frogames Formación es exactamente lo que necesitas.

¡Da el primer paso hacia una profesión creativa, en constante evolución y llena de oportunidades!

¡Nos vemos en clase!