Peticiones asíncronas con for await en JavaScript

Clase 48 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Cómo realizar múltiples peticiones HTTP de forma eficiente en JavaScript?

¿Alguna vez te has enfrentado a la necesidad de realizar múltiples peticiones HTTP en un proyecto de desarrollo web? Este es un desafío común, especialmente cuando interactuamos con varias APIs al mismo tiempo. La solución más eficiente es usar el ciclo for await...of, combinando async y await para ejecutar promesas de manera asíncrona. Esto no solo hace que el código sea más limpio, sino que también mejora el rendimiento y la experiencia del usuario al no bloquear la carga de otros elementos en la aplicación.

¿Qué es y cómo funciona `for await...of`?

El for await...of es una herramienta poderosa en JavaScript. Es un bucle que permite iterar sobre objetos asíncronos, como promesas, de manera que podemos esperar a que cada una se resuelva antes de continuar con la siguiente. La sintaxis es intuitiva y se adapta bien cuando necesitas trabajar con múltiples solicitudes HTTP.

Por ejemplo, digamos que tienes un array de URLs de una API, como la de Rick and Morty. Puedes iterar sobre cada URL y realizar una petición fetch asíncrona de la siguiente manera:

async function fetchNewData() {
  const URLs = [
    'url1',  // Reemplazar con URLs reales
    'url2',
    'url3'
  ];

  try {
    for await (let URL of URLs) {
      let response = await fetch(URL);
      let data = await response.json();
      console.log(data);
    }
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchNewData();

¿Cómo estructurar el código para manejar errores?

Manejar errores es fundamental cuando trabajas con peticiones asíncronas. Utilizar bloques try...catch es la manera recomendada para capturar y manejar errores, como fallas en las solicitudes de red. Esto asegura que tu aplicación no falle por completo si una de las peticiones falla y puedes reaccionar adecuadamente, por ejemplo, mostrando un mensaje de error al usuario.

Dentro del ciclo for await, el bloque try se encarga de realizar la fetch y convertir la respuesta a formato JSON. Si alguna de estas operaciones falla, el control pasa al bloque catch, donde podemos manejar el error de manera elegante.

¿Cuáles son los beneficios de usar `for await...of` en proyectos reales?

Rendimiento sin bloqueo: La ejecución de peticiones de manera asíncrona permite al navegador seguir procesando otros elementos de la interfaz de usuario, mejorando la experiencia.
Código más limpio y manejable: Al usar async/await, tu código se vuelve más legible y fácil de mantener comparado con las promesas tradicionales o los callbacks.
Escalabilidad: Puedes fácilmente adaptar este enfoque para manejar más URLs o añadir lógica adicional al proceso de cada respuesta.

Implementar estas técnicas en tus proyectos no solo optimiza su rendimiento, sino que también proporciona una base robusta para manejar escenarios complejos donde múltiples elementos de datos deben ser cargados y procesados simultáneamente. Así que, ¡anímate a aplicar for await...of en tus futuros desarrollos y experimenta la eficiencia y fluidez mejorada de tus aplicaciones!

Kevin Vargas Murcia

student•

for await...of es una estructura de control en JavaScript utilizada para iterar sobre objetos iterables asíncronos. Permite procesar elementos de forma secuencial, esperando la resolución de cada elemento antes de pasar al siguiente.

for await...of es una herramienta poderosa para trabajar con datos asíncronos en JavaScript. Permite iterar sobre elementos de forma secuencial, esperando la resolución de cada elemento antes de continuar, lo que simplifica el manejo de operaciones asíncronas en comparación con el uso de promesas y bucles tradicionales.

Diferencia con for...of:

Mientras que for...of se utiliza para iterar sobre objetos iterables síncronos, for await...of está diseñado específicamente para manejar iterables asíncronos.

Diego Zazueta

student•

Es aconsejable no usar await dentro de bucles innecesariamente, ya que esto puede bloquear el event loop. Si necesitas realizar múltiples operaciones asíncronas dentro de un bucle, considera usar Promise.all o manejar las promesas en paralelo.

// Evita esto:

for (let url of urls) {

let respuesta = await fetch(url);

// procesar respuesta

}

// En su lugar:

const promesas = urls.map(url => fetch(url).then(res => res.json()));

const resultados = await Promise.all(promesas);

Jesus Eduardo Castillo Saavedra

student•

Buen aporte amigo, te agradezco ya que si investigue y tienes la razon

Elver David Matacea Lopez

student•

Tambien existe promese.all donde podemos manipular .then() y .catch() y se usa cuando:

Quieres manejar promesas en paralelo para mejorar el rendimiento.
Necesitas manejar errores específicos de cada promesa de manera individual.
Prefieres mantener el control sobre la lógica de flujo asincrónico y la concurrencia.


const urls = \['Ejemplo1', 'Ejemplo2', 'Ejemplo3' ];

Promise.all(urls.map(url => fetch(url).then(response => response.json())))

.then(results => {

results.forEach(data => console.log(data));

}) .catch(error => console.error('Error:', error));

Ecsar García Sandoval

student•

de nuevo el código comentado:

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);

}

Sandra Rosa Arroyo Paredes

student•

for await...of:

Propósito: Itera sobre promesas u objetos asíncronos iterables secuencialmente.
Sintaxis: for await (const valor of iterable) { ... }
Ejecución: Secuencial (espera a que cada promesa se resuelva antes de pasar a la siguiente).
Resultado: Procesa cada resultado individualmente en cada iteración.
Manejo de errores: Puede manejar errores individualmente para cada promesa.
Orden: Procesa las promesas en el orden especificado.
Uso típico: Cuando necesitas procesar una serie de promesas en orden, posiblemente con lógica entre cada resolución.

Promise.all:

Propósito: Ejecuta múltiples promesas en paralelo.
Sintaxis: Promise.all([promesa1, promesa2, ...])
Ejecución: Paralela (todas las promesas se inician al mismo tiempo).
Resultado: Devuelve un array con los resultados de todas las promesas.
Manejo de errores: Si cualquier promesa es rechazada, Promise.all se rechaza inmediatamente.
Orden: Los resultados mantienen el orden de las promesas de entrada.
Uso típico: Cuando necesitas realizar múltiples operaciones asíncronas independientes y esperar a que todas se completen.

Sandra Rosa Arroyo Paredes

student•

En resumen, usa Promise.all cuando necesites ejecutar múltiples operaciones asíncronas independientes en paralelo, y for await...of cuando necesites procesar promesas secuencialmente o cuando el orden y el control individual sean importantes

Calvin Rafael Bobadilla Fernandez

student•

RESUMEN:

Johan Rodriguez

student•

En este caso el 'for await of...' no es necesario aquí porque estamos iterando sobre un array con strings. 'For await of' es usado para iterar sobre objetos asincrónicos. Entonces para que este bucle tenga sentido, el array debería contener fetchs, de esta forma:

const promises = [
  fetch("https://rickandmortyapi.com/api/character"),
  fetch("https://rickandmortyapi.com/api/location"),
  fetch("https://rickandmortyapi.com/api/episode"),
];

async function fetchData() {
  try {
    for await (let response of promises) {
      const data = await response.json();
      console.log(data);
    }
  } catch (error) {
    console.log(error);
  }
}

fetchData();

Andres Lopez

student•

¿Por que la Promise en el ultimo ejemplo queda en pending?

Carlos Ramírez

student•

Si te refieres a lo que sale en pantalla como: > Promise {<pending>} Eso sale en todos los ejemplos pero lo importante es que al abrir ese texto te sale que la promesa se ejecutó y finalizó.

Miguel Jonathan Madrigal González

student•

Hasta este momento recuerden que ya hemos visto 3 conceptos...

Creación y manejo de promesas tradicionales con propiedades resolve, reject y métodos then() y catch()
Función asíncrona con Async y Await la cual en teoría deberiamos priorizar utilizar en lugar de una promesa tradicional debido a mejor legibilidad y estructura.
Manejo de un array en función asíncrona con for await of, quiero destacar que existe otra manera de manejar multiples promesas, y esta es: Promise.all()

---

Sobre Promise.all(), el código seria:

function ejecutarPromesasDeArray (array) {

  Promise.all(array.map(url => {
    
    fetch(url)
      .then(response => {
        response.json()
        console.log(response)
        console.log('Promesa finalizada')
      })
      .catch(error => console.log(error))
  }))
}
```El código anterior ejecuta las promesas de un array pero a diferencia de for await of, Promise.all() ejecuta las promesas en paralelo, y for await of ejecuta de promesa en promesa, una por una. Por lo que es más eficiente utilizar Promise.all() para tratar distintos url en un tema de tiempo, pero recuerda que depende de tu situación/proyecto será preferible usar un método o otro.

Daniel Andres Rojas Paredes

student•

hola tengo un comportamiento inusual al correr esta funcion, no entiendo el porque me imprime el promise, pero no la data.

este es el codigo que hasta donde entiendo no es diferente al de la clase:

const urls=["https://rickandmortyapi.com/api/character","https://rickandmortyapi.com/api/location","https://rickandmortyapi.com/api/episode"];

async function fetchAlot() {

try{

for await (let url of urls){

let response= await fetch(url)

let data= response.json()

console.log("data:")

console.log(data);

}

}catch(error){

console.log(error);

}

Miguel Jonathan Madrigal González

student•

La razón es que se ejecuta let data = response.json() inmediatemente sin esperar a que se resuelva el fetch().

La solución es agregar await:

let data = await response.json()

Alejandro Zapata

student•

Comparto el código de la clase:

async function fetchData(){
    try{
        let response = await fetch("https://swapi.dev/api/people");
        let data = await response.json(); // se convierte la respuesta a json, y json a data
        console.log(data);
    } catch(error){
        console.log("Error: " + error);
    }
}

const urls = [
    "https://swapi.dev/api/people",
    "https://swapi.dev/api/planets",
    "https://swapi.dev/api/starships",
    "https://swapi.dev/api/vehicles"
];

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();

Bryan Alberto Duran Cuellar

student•

async function fetchData(nombre) {

try {

const respuesta = await fetch(https://pokeapi.co/api/v2/pokemon/${nombre});

const datos = await respuesta.json();

// Habilidades

const habilidades = datos.abilities.map(ability => ability.ability.name);

// Tipos

const tipos = datos.types.map(tipo => tipo.type.name);

//debilidades (damage_relations) del primer tipo

const tipoPrincipal = datos.types[0].type.name;

const tipoRespuesta = await fetch(https://pokeapi.co/api/v2/type/${tipoPrincipal});

const tipoDatos = await tipoRespuesta.json();

const debilidades = tipoDatos.damage_relations.double_damage_from.map(tipo => tipo.name);

console.log("Nombre:", datos.name);

console.log("Altura:", datos.height);

console.log("Peso:", datos.weight);

console.log("Habilidades:", habilidades.join(", "));

console.log("Tipos:", tipos.join(", "));

console.log("Debilidades:", debilidades.join(", "));

} catch (error) {

console.log("Error al obtener el Pokémon:", error);

}

fetchData("charizard");

/* Con varias urls, por si queremos llamar mas de una promesa */

const urls = [

'https://pokeapi.co/api/v2/pokemon/pikachu',

'https://pokeapi.co/api/v2/pokemon/bulbasaur',

'https://pokeapi.co/api/v2/pokemon/squirtle',

'https://pokeapi.co/api/v2/pokemon/charizard',

'https://pokeapi.co/api/v2/pokemon/mewtwo',

'https://pokeapi.co/api/v2/pokemon/eevee',

'https://pokeapi.co/api/v2/pokemon/snorlax',

'https://pokeapi.co/api/v2/pokemon/jigglypuff',

'https://pokeapi.co/api/v2/pokemon/gengar',

'https://pokeapi.co/api/v2/pokemon/dragonite'

];

async function fetchNewData() {

try {

for await (let url of urls) {

const respuestas = await fetch(url)

let data = await respuestas.json()

console.log(data.name)

console.log(data.height)

console.log(data.weight)

console.log("-----")

console.log("Habilidades:", data.abilities.map(ability => ability.ability.name).join(", "))

console.log("Tipos:", data.types.map(type => type.type.name).join(", "))

console.log("Debilidades:", data.types[0].type.name)

}

} catch (error) {

console.log("Error al obtener los Pokémon:", error);

}

fetchNewData();

Coimbra Boso German

student•

we, que opinan de AJAX? Es algo similar?

O es obsoleto?

David Osvaldo Mansilla

student•

Que Grande este profe, En 4 clases te explica 4 cursos un genio realmente y muy claro 👏👏👏👏

Nataly Nanda

student•

El uso de for await...of permite manejar múltiples llamadas asíncronas de manera secuencial. Cada llamada a await fetch(URL) retornará su resultado individualmente, y cada una se sumará al call stack a medida que se complete. No se combinan en un solo callback, sino que cada resultado se maneja de forma independiente, permitiendo que el flujo del programa continúe mientras se esperan las respuestas. Así, cada llamada se espera y procesa por separado.

Miguel Jonathan Madrigal González

student•

Les tengo un reto

He creado mi propia API que devuelve un número aleatorio, el reto consiste en que practiquen, hagan fetch al siguiente url fetch(`https://api-random-number-miguezpz.onrender.com/randomNumber/${valorMinimo}/${valorMaximo}`)

La petición devolverá un objeto {randomNumber: numero}, es necesario utilizar el método .json() con la respuesta. Deben usar async y await, usar los conocimientos que hemos aprendido hasta ahora, lo mejor es que intenten escribir el código con lo que recuerdan intentando revisar los ejemplos de la clase como guia o investigar la solución en internet lo menos posible. En ${valorMinimo} y ${valorMaximo} se asignan numeros, el numero aleatorio que obtendran será en el rango que ustedes elijan, por ejemplo:

fetch(`https://api-random-number-miguezpz.onrender.com/randomNumber/1/10`)

WARNING... Les dejo mi solución al reto:

Como curiosidad, en una terminal linux pueden hacer curl al url y obtener el número aleatorio con:

curl https://api-random-number-miguezpz.onrender.com/randomNumber/1/10

Miguel Jonathan Madrigal González

student•

Si tienes curiosidad sobre como he creado mi API, gran parte del conocimiento lo adquirí del ultimo curso gratis de programación básica, en las ultimas clases donde abordan la creación del modo multijugador en un juego que se crea durante todo el curso. Utilicé node.js, los modulos cors y express, y como plataforma para tener el API funcionando 24/7 utilicé Render https://render.com/

Subí el código a un nuevo repositorio al cual puedes acceder aquí, por si le quieres hechar un ojo: https://github.com/Miguezpz/API_random_number

El código se encuentra en el archivo llamado app.js. Siganme en github y yo los sigo de vuelta 😉.

Si tienes alguna duda con mucho gusto te ayudo.

Miguel Jonathan Madrigal González

student•

OJO! en mi solución hice fetch al url equivocado, ya que yo estaba ejecutando el servidor en mi propio sistema en el puerto 8080, recuerden que el url correcto es:

https://api-random-number-miguezpz.onrender.com/randomNumber/1/10

Juliana Rios

student•

Mis notas:

Peticiones asíncronas con for await en JavaScript

¿Cómo realizar múltiples peticiones HTTP de forma eficiente en JavaScript?

¿Qué es y cómo funciona for await...of?

¿Cómo estructurar el código para manejar errores?

¿Cuáles son los beneficios de usar for await...of en proyectos reales?

¿Qué es y cómo funciona `for await...of`?

¿Cuáles son los beneficios de usar `for await...of` en proyectos reales?