Manejando múltiples promesas con async/await ⏲

Photo by Alexander Schimmeck on Unsplash

Una promesa en Javascript se puede entender como un if temporizado , si se cumple la promesa se resuelve (resolve) con el resultado esperado, sino, se rechaza (reject) la promesa. A simple vista, es bastante simple, pero su funcionamiento por detrás puede complicar a más de uno debido a la asincronizidad del event loop que maneja Javascript.

Veamos el siguiente ejemplo. Vamos a simular una consulta hacia un servidor, el cual nos devolverá un listado de animales.

En este caso, la función getAnimals nos devolverá el listado después de 1 segundo. Ahora, agregaremos 2 funciones para modificar el contenido de la lista devuelta en la primera llamada, ambas también asíncronas:

Iteraremos cada uno de los elementos de la lista, resolviendo cada una de las promesas dentro de un for...of

Y este es el mensaje que aparece en consola:

[
  { id: 1, name: 'cat' },
  { id: 2, name: 'dog' },
  { id: 3, name: 'ferret' },
  { id: 4, name: 'snake' }
]
cat
CAT
dog
DOG
ferret
FERRET
snake
SNAKE

Tal vez no es lo que esperamos, así que, utilizaremos Promise.all para resolver todas las funciones asíncronas en el orden en que se van llamando, de la siguiente forma:

Promise.all se encargará de resolver todas las llamadas asíncronas y únicamente resolverá (resolve) cuando cada una de las promesas internas se hayan ejecutado exitosamente.

[
  { id: 1, name: 'cat' },
  { id: 2, name: 'dog' },
  { id: 3, name: 'ferret' },
  { id: 4, name: 'snake' }
]
cat
dog
ferret
snake
CAT
DOG
FERRET
SNAKE

De esta manera, podemos tener una ejecución asíncrona más ordenada y controlada.

Puedes revisar el código en el siguiente repositorio.

Si te gustó no olvides dejar tu reacción y comentarios, y compártelo con tus amigos 😉