Cuando un proyecto requiere obtener datos de varias fuentes al mismo tiempo, es fundamental saber cómo manejar múltiples peticiones asíncronas sin bloquear la experiencia del usuario. Aquí se explica paso a paso cómo lograrlo usando un patrón elegante que combina async/await con un bucle especial de JavaScript.
¿Por qué necesitas un bucle asíncrono para múltiples peticiones?
En muchas pantallas de una aplicación web, no basta con una sola llamada a una API. Puede que necesites traer personajes, locaciones y episodios al mismo tiempo, como sucede con la API de Rick y Morty. Si intentas hacer esto de forma síncrona, el usuario quedaría esperando a que cada petición termine antes de ver cualquier contenido.
El for await of [01:00] es un bucle diseñado precisamente para iterar sobre operaciones asíncronas. A diferencia de un for...of convencional, este bucle espera a que cada promesa se resuelva antes de pasar a la siguiente iteración, todo dentro de un contexto async.
¿Cómo se construye el arreglo de URLs y la función asíncrona?
El primer paso es crear un array con las URLs a las que necesitas hacer peticiones. En este caso se usan tres endpoints de la API de Rick y Morty: personajes, locaciones y episodios [01:24].
Después se define una función async llamada fetchNewData que contiene toda la lógica:
javascript
const URLs = [
'https://rickandmortyapi.com/api/character',
'https://rickandmortyapi.com/api/location',
'https://rickandmortyapi.com/api/episode'
];
async function fetchNewData() {
try {
for await (let url of URLs) {
let response = await fetch(url);
let data = await response.json();
console.log(data);
}
} catch (error) {
console.log('Error:', error);
}
}
fetchNewData();
¿Qué hace cada línea dentro del bucle?
for await (let url of URLs): itera sobre cada URL del arreglo de forma asíncrona.await fetch(url): realiza la petición HTTP y espera la respuesta.await response.json(): convierte la respuesta en un objeto JSON utilizable.console.log(data): imprime los datos obtenidos de cada endpoint.
¿Cómo funciona el manejo de errores con try catch?
El bloque try/catch [03:30] envuelve todo el bucle. Si alguna de las peticiones falla, la ejecución salta directamente al catch, donde se captura el error y se imprime. Es importante recordar que el catch debe ir fuera del try, justo después de la llave de cierre del bloque try.
¿Qué resultados devuelve esta implementación?
Al ejecutar fetchNewData(), se obtienen tres impresiones en consola [04:15]:
- Primera llamada: devuelve el listado de personajes de Rick y Morty.
- Segunda llamada: devuelve las locaciones, incluyendo datos como la Tierra y otros escenarios.
- Tercera llamada: devuelve los episodios de la serie.
La ventaja principal de este enfoque es que las peticiones se procesan de manera asíncrona. Esto significa que no bloquean el call stack [00:30]. Mientras las promesas se resuelven, el navegador puede seguir cargando HTML, ejecutando JavaScript y manteniendo la interfaz activa. Una vez que cada promesa se cumple, los datos regresan al call stack y quedan disponibles para inyectar contenido en el DOM y mostrar información actualizada al usuario.
Este patrón es especialmente útil cuando trabajas con pantallas que dependen de múltiples fuentes de datos. ¿Has usado for await of en alguno de tus proyectos? Comparte tu experiencia.
