Introducción a Fetch API: Peticiones HTTP Modernas en JavaScript
Aprende a hacer solicitudes HTTP usando la moderna API Fetch, una alternativa poderosa y sencilla a XMLHttpRequest con soporte nativo para promesas.
TL;DR - Resumen rápido
- Fetch API es la forma moderna de hacer peticiones HTTP en JavaScript
- Usa promesas en lugar de callbacks, haciendo el código más legible
- La sintaxis básica es fetch(url) que retorna una promesa
- Es necesario llamar a métodos como .json() o .text() para leer el cuerpo de la respuesta
- Fetch no rechaza la promesa en errores HTTP 4xx/5xx, solo en errores de red
Introducción a Fetch API
Fetch API es una interfaz moderna para hacer peticiones de red (HTTP) en JavaScript. Introducida en ES6 (2015), reemplaza a la antigua XMLHttpRequest con una sintaxis más limpia y basada en promesas, lo que facilita enormemente el manejo de operaciones asíncronas. Fetch está disponible en todos los navegadores modernos y es la forma recomendada de comunicarse con APIs REST en JavaScript vanilla.
Antes de Fetch, los desarrolladores debían lidiar con callbacks anidados y código difícil de mantener. Con Fetch, puedes escribir código asíncrono que parece síncrono gracias a las promesas y async/await. Esto no solo mejora la legibilidad, sino que también facilita el manejo de errores y el encadenamiento de múltiples peticiones.
Soporte del navegador
Fetch API está soportada en todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Para navegadores antiguos como Internet Explorer, necesitarás un polyfill o usar XMLHttpRequest directamente.
¿Qué es Fetch API?
Fetch API es un conjunto de interfaces que te permite hacer peticiones HTTP de manera asíncrona. El método principal es fetch(), que acepta una URL y opcionalmente un objeto de configuración con opciones como método, headers, body, y más. Este método retorna una promesa que se resuelve con un objeto Response que representa la respuesta del servidor.
La API está diseñada para ser flexible y potente, permitiéndote hacer desde simples peticiones GET hasta complejas solicitudes con autenticación, uploads de archivos, y manejo de streams. Es parte del estándar web y mantiene compatibilidad con otras APIs como Service Workers y Cache API.
- Basada en promesas para un manejo más limpio de operaciones asíncronas
- Sintaxis simple y legible comparada con XMLHttpRequest
- Soporte nativo para streams y lectura progresiva de datos
- Integración con async/await para código que parece síncrono
- Soporte para todos los métodos HTTP (GET, POST, PUT, DELETE, etc.)
Sintaxis Básica
La sintaxis básica de Fetch es sorprendentemente simple. Solo necesitas llamar a la función fetch() con la URL que deseas solicitar. Esta función retorna una promesa que se resuelve cuando la respuesta está disponible. Sin embargo, hay un detalle importante: la promesa se resuelve incluso cuando el servidor responde con un error HTTP (como 404 o 500).
Promesas y Fetch
Fetch usa promesas para manejar la respuesta asíncrona. La promesa que retornafetch() se resuelve con un objeto Response, pero este objeto contiene los metadatos de la respuesta (status, headers, etc.) y no el cuerpo de la respuesta. Para leer el cuerpo, debes llamar a uno de los métodos del objeto Response como .json(), .text(), o .blob().
En este ejemplo, primero hacemos la petición con fetch(), que retorna una promesa. Cuando la promesa se resuelve, recibimos un objeto Response. Luego llamamos a .json() para leer el cuerpo de la respuesta como JSON. Es importante notar que .json() también retorna una promesa, por eso usamos .then() anidado o mejor aún,async/await para un código más limpio.
Usando async/await, el código es mucho más legible y parece síncrono. La palabra clave await pausa la ejecución de la función asíncrona hasta que la promesa se resuelve, pero sin bloquear el hilo principal. Esto es especialmente útil cuando necesitas hacer múltiples peticiones en secuencia o cuando necesitas procesar la respuesta antes de continuar.
Tipos de respuesta
Además de .json(), el objeto Response tiene otros métodos para leer el cuerpo: .text() para texto plano, .blob() para archivos binarios, .arrayBuffer() para datos binarios crudos, y.formData() para datos de formulario.
Fetch vs XMLHttpRequest
Antes de Fetch, XMLHttpRequest (XHR) era la única forma de hacer peticiones HTTP en el navegador. XHR usa callbacks y tiene una sintaxis verbosa y difícil de mantener. Fetch resuelve estos problemas con una API basada en promesas y una sintaxis más limpia. Aunque XHR todavía funciona, Fetch es la forma moderna y recomendada de hacer peticiones en JavaScript.
- Fetch usa promesas, XHR usa callbacks (evitando el callback hell)
- Fetch tiene una sintaxis más simple y declarativa
- Fetch está diseñada para ser usada con Service Workers
- Fetch tiene mejor soporte para streams y lectura progresiva
- Fetch es más consistente con otras APIs modernas de JavaScript
Errores Comunes
Al trabajar con Fetch, hay varios errores comunes que los desarrolladores cometen, especialmente cuando están aprendiendo. El error más frecuente es asumir que Fetch rechaza la promesa cuando el servidor responde con un error HTTP como 404 o 500. Esto NO es cierto: Fetch solo rechaza la promesa en errores de red (como cuando no hay conexión a internet).
En este ejemplo, la petición a una URL que no existe (404) no rechaza la promesa. En su lugar, la promesa se resuelve con un objeto Response que tiene la propiedad ok en false y status en 404. Por eso es importante verificar siempre la propiedad ok o elstatus antes de procesar la respuesta.
La forma correcta de manejar errores HTTP es verificar la propiedadok del objeto Response o el código de status. Si la respuesta no es exitosa, puedes lanzar un error manualmente o manejar el caso según tus necesidades. Este patrón es esencial para aplicaciones robustas que manejen correctamente todos los escenarios de error.
Error de red vs error HTTP
Fetch solo rechaza la promesa en errores de red (sin conexión, DNS fallido, timeout de red). Errores HTTP como 404, 500, 403 NO rechazan la promesa. Siempre verifica response.ok o response.status para detectar errores del servidor.
Error CORS (Cross-Origin)
Si intentas hacer una petición a un dominio diferente al de tu aplicación, es posible que encuentres un error CORS. Este es un mecanismo de seguridad del navegador que bloquea peticiones entre dominios. El servidor debe configurar los headers CORS apropiados (Access-Control-Allow-Origin) para permitir estas peticiones. Este error aparece en la consola como "blocked by CORS policy".
Resumen: Fetch API
Conceptos principales:
- •Fetch API es la forma moderna de hacer peticiones HTTP en JavaScript
- •Usa promesas en lugar de callbacks para un código más limpio
- •El método fetch() retorna una promesa con un objeto Response
- •Es necesario llamar a .json() o .text() para leer el cuerpo de la respuesta
- •Fetch no rechaza la promesa en errores HTTP 4xx/5xx, solo en errores de red
Mejores prácticas:
- •Usa async/await para un código más legible que .then()/.catch()
- •Siempre verifica response.ok o response.status antes de procesar la respuesta
- •Maneja errores tanto de red como HTTP con try/catch y verificaciones
- •Usa el método apropiado (.json(), .text(), .blob()) según el tipo de respuesta
- •Considera usar AbortController para cancelar peticiones largas o innecesarias