Cómo trabajar con async / await en bucles JavaScript

¿Cómo ejecutar bucles asíncronos en orden o en paralelo en JavaScript?

Antes de hacer magia asincrónica, quiero recordarte cómo son los bucles sincrónicos clásicos.

Bucles sincrónicos

Hace mucho tiempo escribí bucles de esta manera (tal vez tú también):

for (var i=0; i < array.length; i++) { var item = array[i]; //  -  item } 

Este ciclo es bueno y rápido. Pero tiene muchos problemas con la legibilidad y el apoyo. Después de un tiempo, me acostumbré a su mejor versión:

 array.forEach((item) => { //  -  item }); 

JavaScript se está desarrollando muy rápido. Aparecen nuevas características y sintaxis. Una de mis mejoras favoritas es async / wait .

Ahora uso esta sintaxis con bastante frecuencia. Y a veces hay situaciones en las que necesito hacer algo con elementos de matriz de forma asincrónica.

Bucles asincrónicos

¿Cómo usar await en el cuerpo del bucle? Tratemos de escribir una función asincrónica y esperemos la tarea de procesar cada elemento:

 async function processArray(array) { array.forEach(item => { //       //     ! await func(item); }) } 

Este código arrojará un error. Por qué Porque no podemos usar await dentro de una función síncrona. Como puede ver, processArray es una función asincrónica. Pero la función anónima que usamos para forEach es sincrónica .

¿Qué se puede hacer al respecto?

1. No espere el resultado de la ejecución.

Podemos definir una función anónima como asíncrona:

 async function processArray(array) { array.forEach(async (item) => { await func(item); }) console.log('Done!'); } 

Pero forEach no esperará a que se complete la tarea. forEach es una operación síncrona. Ella simplemente iniciará las tareas y seguirá adelante. Veamos una prueba simple:

 function delay() { return new Promise(resolve => setTimeout(resolve, 300)); } async function delayedLog(item) { //    await  Promise //    delay await delay(); console.log(item); } async function processArray(array) { array.forEach(async (item) => { await delayedLog(item); }) console.log('Done!'); } processArray([1, 2, 3]); 

En la consola veremos:

 Done! 1 2 3 

En algunas situaciones, esto puede ser un resultado normal. Pero aún así, en la mayoría de los casos, esta no es una lógica adecuada.

2. Procesando el ciclo secuencialmente

Para esperar el resultado de la ejecución del cuerpo del bucle, necesitamos volver al viejo bucle "for". Pero esta vez usaremos su nueva versión con for..of construct (Gracias al Protocolo de iteración ):

 async function processArray(array) { for (const item of array) { await delayedLog(item); } console.log('Done!'); } 

Esto nos dará el resultado esperado:

 1 2 3 Done! 

Cada elemento de la matriz se procesará secuencialmente. ¡Pero podemos ejecutar el ciclo en paralelo!

3. Procesando el ciclo en paralelo

Debe modificar ligeramente el código para iniciar las operaciones en paralelo:

 async function processArray(array) { //  "map"    const promises = array.map(delayedLog); //       await Promise.all(promises); console.log('Done!'); } 

Este código puede ejecutar varias tareas de delayLog en paralelo. Pero tenga cuidado con las grandes matrices. Demasiadas tareas pueden ser demasiado difíciles para la CPU y la memoria.

Además, no confunda las "tareas paralelas" del ejemplo con paralelismo y subprocesos reales. Este código no garantiza la ejecución paralela. Todo depende del cuerpo del bucle (en el ejemplo, se delayedLog ). Las solicitudes de red, los trabajadores web y algunas otras tareas se pueden realizar en paralelo.