ECMAScript 2019. Iteración asíncrona usando “for-of”

Cómo emplear los bucles “for-of” para iterar de forma asíncrona

Image for post
Image for post

English version: https://medium.com/@ger86/ecmascript-2019-asynchronous-iteration-using-for-of-dc1893f99fd9

En este artículo quiero centrarme en otra de las características que trae consigo ECMAScript 2019: la iteración asíncrona. Este tipo de iteración está basada en el bucle el cual habitualmente se usa para iterar a través de una serie de elementos que se encuentran en un array y que a partir de ahora podremos emplear para iterar elementos asíncronos tales como . ¡Vamos a verlo!

El bucle for-of

Como comentaba al principio del artículo, el bucle nos permite iterarse a través de una lista de elementos incluida dentro de un array. Por ejemplo:

Image for post
Image for post

En este caso, la función itera sobre los elementos del array pasado como argumentos de forma síncrona imprimiendo en la consola el siguiente resultado:

Veamos ahora lo que sucede si en vez de un array de números le pasamos un array de :

Image for post
Image for post

En este caso, vuelve a iterar sobre el array pero lo que obtenemos por pantalla es cada objeto de la lista y no el valor resuelto dentro del mismo. Es decir:

Es aquí donde la llegada de ECMAScript 2019 cobra importancia pues nos va a permitir trabajar con el bucle de forma asíncrona tal y como veremos a continuación.

Iterando de forma asíncrona con “for-of”

Como hemos visto en el ejemplo anterior, si iteramos con el bucle sobre un array de objetos lo que obtenemos en cada paso es el objeto sin resolver pese a que lo deseable sería obtener el valor resuelto una vez que se ejecuta el código asíncrono.

Gracias a ECMAScript 2019 esto ya es posible pues a partir de ahora será posible añadir la palabra clave en un bucle de cara a iterar de forma asíncrona sobre un array de . De este modo, el bucle esperará a que la de la iteración sea resuelta antes de avanzar a la siguiente, permitiéndonos trabajar con el valor resuelto:

Image for post
Image for post

Gracias al uso de en el bucle del ejemplo, lo que obtendremos ahora en la consola será:

Por tanto, esta nueva característica de Javascript va a as resultar muy útil a la hora de trabajar con listas de pues no necesitaremos proporcionar un “callback” para cada una de ellas, sino que podremos iterar sobre ellas empleando el bucle y obtener directamente el valor al que resuelven.

¿Y en qué orden se ejecutan las Promises dentro del bucle?

Otra de las cosas importantes que conviene saber a la hora de trabajar de forma asíncrona con el bucle es en qué orden se van resolviendo las sobre las que está iterando. Es decir, se resuelven en orden o el bucle las lanza todas y las va devolviendo en función de lo rápido que se obtiene el valor. Veámoslo con un ejemplo:

Image for post
Image for post

Como podéis ver, la primera tarda 10 segundos en resolverse, la segunda 3 y la última 2. Sin embargo, la salida que obtenemos por consola es la misma que cuando todas tardaban lo mismo en resolver, es decir:

por lo que el bucle cuando trabaja de forma asíncrona lo que hace es obtener la primera del array, esperar a que resuelva y a continuación pasar a la siguiente lo cual nos permite controlar el orden de ejecución de las mismas.

Conclusión

Como podéis ver, poco a poco Javascript va proporcionándonos más herramientas para mejorar el trabajo con funciones asíncronas tal y como es el caso del uso de en los bucles .

Si queréis saber más sobre las novedades que trae ECMAScript 2019 os dejo un artículo que escribí sobre la función :

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store