JavaScript Fetch API

La Fetch API es una característica clave de JavaScript que permite realizar solicitudes de red (descargar datos, enviar formularios, comunicarse con APIs) y devuelve una Promise. Es el reemplazo moderno del antiguo XMLHttpRequest y funciona de manera natural con async/await. Esta guía cubre los patrones más habituales: solicitudes GET y POST, inspección de la respuesta, lectura de JSON y texto, envío de cabeceras y manejo de errores — utilizando la API gratuita JSONPlaceholder para los ejemplos ejecutables.

Comprendiendo la Fetch API

La Fetch API está diseñada para la comunicación en red y utiliza un sistema basado en promesas para recuperar recursos. Es lo suficientemente flexible como para gestionar diferentes formatos de datos y solicitudes complejas, lo que la convierte en una excelente opción para desarrollar aplicaciones web.

La firma básica es fetch(url, options). Devuelve una promesa que se resuelve con un objeto Response en cuanto el servidor responde con las cabeceras — antes de que el cuerpo haya terminado de descargarse. Luego se lee el cuerpo por separado con un método como .json() o .text(), cada uno de los cuales devuelve su propia promesa.

Un aspecto crítico a tener en cuenta: fetch() solo rechaza ante un fallo de red (sin conexión, error DNS, bloqueo CORS). No rechaza ante códigos de error HTTP como 404 o 500 — estos siguen resolviéndose con éxito. Debes comprobar response.ok (o response.status) por tu cuenta.

Uso básico de Fetch

Veamos un ejemplo básico de obtención de datos desde una publicación de JSONPlaceholder:

Este fragmento obtiene datos de una publicación específica, demostrando cómo Fetch devuelve una promesa que se resuelve con la respuesta de la solicitud. La respuesta se analiza como JSON y se muestra en la consola.

Inspección de la respuesta

El objeto Response contiene metadatos útiles antes incluso de leer el cuerpo. Las propiedades más importantes son:

• response.ok — un boolean que es true para códigos de estado en el rango 200–299.
• response.status — el código de estado HTTP numérico (p. ej., 200, 404, 500).
• response.statusText — el mensaje de texto asociado al estado (p. ej., "OK").
• response.headers — un objeto Headers que se puede consultar con .get().

Lectura del cuerpo: .json() frente a .text()

El cuerpo de una respuesta puede leerse en varios formatos. Cada método devuelve una promesa y solo puede invocarse una vez por respuesta — el cuerpo es un flujo que se consume:

• response.json() — analiza el cuerpo como JSON y lo resuelve como un object o array de JavaScript.
• response.text() — resuelve el cuerpo sin procesar como una string. Útil para texto plano, HTML o cuando quieres gestionar el análisis JSON por tu cuenta.
• response.blob() — resuelve un Blob, para datos binarios como imágenes o archivos.

Manejo de errores en Fetch

El manejo de errores es fundamental cuando se trabaja con solicitudes de red. Como fetch() no lanza una excepción ante códigos de error HTTP, el patrón estándar consiste en comprobar response.ok y lanzar tu propio error cuando sea false. Aquí tienes un ejemplo con manejo de errores:

En este ejemplo comprobamos si la respuesta es exitosa; si no lo es, se lanza un error. El método .catch() captura cualquier error, preservando la integridad de la aplicación.

Implementación de una solicitud POST

La Fetch API no se limita a las solicitudes GET; también gestiona con igual eficacia las solicitudes POST para enviar datos a un servidor. Pasa un segundo argumento con method, un body y headers. Al enviar JSON, debes tanto serializar el cuerpo con JSON.stringify() como establecer la cabecera Content-Type para que el servidor sepa cómo analizarlo. Así se crea una nueva publicación con JSONPlaceholder:

Este fragmento de código muestra cómo enviar una solicitud POST con datos JSON, especificando el método, el cuerpo y las cabeceras. Ilustra la versatilidad de la Fetch API para gestionar distintos tipos de solicitudes.

Envío de cabeceras de solicitud personalizadas

Las cabeceras sirven para informar al servidor sobre la solicitud — el tipo de contenido, el formato de respuesta esperado o las credenciales de autenticación como un token bearer. Puedes pasar las cabeceras como un object plano o crearlas con la clase Headers para mayor control:

Nota: una solicitud a otro origen solo tendrá éxito si ese servidor lo permite mediante CORS. Consulta Fetch: solicitudes de origen cruzado para ver cómo las reglas de origen cruzado afectan a las cabeceras y las credenciales.

Uso de Async/Await con Fetch

Para un enfoque más elegante del código asíncrono, la Fetch API puede combinarse con async y await. Este método ofrece una sintaxis más legible, similar al código síncrono:

Usando async y await, este ejemplo obtiene una publicación, esperando la respuesta y procesándola dentro de un bloque try/catch para el manejo de errores. Muestra cómo las características modernas de JavaScript pueden simplificar el uso de la Fetch API.

Manejo de errores con Async/Await

En lo que respecta al manejo de errores con async/await, se realiza habitualmente mediante bloques try-catch.

Para gestionar los errores que puedan ocurrir durante operaciones asíncronas, puedes envolver tus llamadas await en un bloque try y capturar cualquier error con un bloque catch. Así es como puedes añadir manejo de errores a la función fetchData:

Propagación de errores

La propagación de errores es la forma en que un error "se mueve" o se transmite de una parte del programa a otra. Imagínalo como el camino que recorre un error una vez que ocurre. Cuando se produce un error, es como dejar caer una pelota. La propagación de errores trata sobre hacia dónde va esa pelota después de caer: ¿alguien la atrapa, o llega al suelo?

En JavaScript, esto ocurre típicamente mediante el encadenamiento de rechazos de promesas, donde un rechazo no gestionado sube por la pila de llamadas hasta que un bloque catch o un manejador global lo intercepta.

En el ejemplo siguiente, si quieres que los errores sean gestionados por la función llamante (como viewData), debes evitar capturarlos en fetchData o volver a lanzarlos después de capturarlos:

Como puedes ver, el mismo objeto de error es capturado en ambas funciones porque lo volvemos a lanzar desde fetchData hacia viewData.

Temas relacionados

Para profundizar en la Fetch API, explora estos capítulos relacionados:

• JavaScript Promise — la base sobre la que se construye Fetch.
• Async/Await — la forma más limpia de escribir llamadas con Fetch.
• Fetch: Abortar — cancela una solicitud con AbortController (útil para tiempos de espera y búsqueda mientras se escribe).
• Fetch: solicitudes de origen cruzado — cómo CORS controla las solicitudes a otros dominios.

Conclusión

La Fetch API es una herramienta indispensable para los desarrolladores de JavaScript, que potencia las aplicaciones web con su enfoque basado en promesas para las solicitudes de red. A través de ejemplos prácticos, esta guía demuestra cómo la Fetch API puede utilizarse de forma eficaz para obtener datos, manejar errores y realizar solicitudes POST, aprovechando la API JSONPlaceholder para aplicaciones del mundo real. Dominar la Fetch API capacita a los desarrolladores para crear aplicaciones web más responsivas, dinámicas y robustas.

Práctica