Este es un error bastante común cuando se trata con la asincronicidad en Javascript, y no es muy sencillo de explicar, lamentablemente.
Lo que realmente hace keyword await
es reservar un espacio en la call stack para ejecutar todo el código que va a continuación una vez la Promise
se resuelve. Digamos que, virtualmente, se crea una función con todo ese contenido.
La call stack es una estructura de datos que registra básicamente en qué parte del programa estamos. Si entramos en una función, la colocamos en la parte superior de la pila.
Cuando hablamos de ejecución asíncrona en Javascript, se añade el concepto del event loop. El event loop se encargará de estar pendiente a todas las callbacks en espera para colocarlas en el call stack.
De ese modo, conseguimos que el script siga ejecutándose mientras estamos esperando a una respuesta (de la base de datos, petición HTTP, evento de UI, etc...).
Aquí dejo una serie de lecturas muy interesantes para profundizar sobre el tema, también un vídeo excelente.
Quiero disculparme si estoy haciendo esta respuesta demasiado extensa, pero necesito dejar claros estos conceptos.
Con lo mencionado,
const delay = millis =>
new Promise((resolve, reject) => {
setTimeout(resolve, millis);
});
delay(1000).then(_ => {
console.log(`Done.`);
});
console.log(`End?`);
... a nadie le soprende que se imprime primero el End?
, después el Done.
(un segundo después).
Cuando ejecutamos la función map
de un array y tenemos dentro una Promise
, esa Promise
se efectúa, pero se resuelve después.
const arr = [0, 1, 2];
arr.map(e => {
console.log(`Entry for ${e}`);
delay(100).then(_ => {
console.log(`Resolved for ${e}`);
});
});
Como en el ejemplo anterior, creo que no sorprende a nadie que el output sea
Entry for 0
Entry for 1
Entry for 2
Resolved for 0
Resolved for 1
Resolved for 2
Vamos a refactorizarlo para usarlo con async
/await
.
const arr = [0, 1, 2];
arr.map(async e => {
console.log(`Entry for ${e}`);
await delay(100);
console.log(`Resolved for ${e}`);
});
Entry for 0
Entry for 1
Entry for 2
Resolved for 0
Resolved for 1
Resolved for 2
¡Y voilà! Tenemos exactamente el mismo output. Quizás esto sorprenda a algunos. Quizás no.
Si nos ponemos a pensar, map
tiene por dentro un loop que iterará sobre cada elemento del array. Para cada uno, ejecutará la función que le pasemos como argumento dándonos el valor del elemento en cada iteración.
El caso es que map
nunca va a esperar a nuestra función a que ejecute. La función map
no es asíncrona.
Al final de la respuesta vemos una aproximación a la implementación del map
para verlo mejor.
Vamos a emular tu escenario.
const arr = [0, 1, 2];
const constrained = (arr, max) => {
let count = 0;
return () => {
arr.map(async e => {
if (count < max) {
console.log(`Entry for ${e}`);
await delay(1000);
++count;
console.log(`Resolved for ${e}. Count is now ${count}`);
}
});
}
}
const onlyTwo = constrained(arr, 2);
onlyTwo();
Como vemos, antes de "awaitear" la Promise
, hacemos el check con el conteo. El output es el siguiente.
Entry for 0
Entry for 1
Entry for 2
Resolved for 0. Count is now 1
Resolved for 1. Count is now 2
Resolved for 2. Count is now 3
Se han ejecutado todas las Promise
.
¿Por qué? Lo hemos visto antes, cada una de las funciones en la iteración del map
se ha ejecutado "instantáneamente", y la variable count
se ha actualizado una vez se han resuelto las Promise
.
Por lo tanto, en el momento de ejecutar la condición en el if
, count
aún no se había modificado, seguía siendo 0
. Todas las condiciones se cumplieron.
¿Qué podemos hacer para solucionar el problema?
Bueno una solución muy inmediata sería poner la condición una vez la Promise
se ha resuelto.
const constrained = (arr, max) => {
let count = 0;
return () => {
arr.map(async e => {
console.log(`Entry for ${e}`);
await delay(1000);
if (count++ < max)
console.log(`Resolved for ${e}. Count is now ${count}`);
});
}
}
De esta forma, tenemos el output que buscábamos.
Entry for 0
Entry for 1
Entry for 2
Resolved for 0. Count is now 1
Resolved for 1. Count is now 2
Sin embargo, todas las Promise
fueron resueltas. Esto supondría, en un escenario real, que se han ejecutado todas las llamadas HTTP, las queries a la base de datos, eventos, ... pero sólo hemos tratado el resultado de éstas max
veces.
Tampoco es lo que necesitamos.
Deberemos iterar sobre el array y, en cada iteración, esperar a la resolución de la Promise
para poder actualizar la variable count
.
Para ello, y des de la ES2018 de Javascript, podemos usar el for await ... of
.
Con el for
asíncrono, se hace un await
en cada iteración.
const constrained = (arr, max) => {
let count = 0;
return async () => {
for await (let e of arr) {
if (count++ > max) break;
console.log(`Entry for ${e}`);
await delay(100);
console.log(`Resolved for ${e}`);
}
}
}
Et voilà, el output es
Entry for 0
Resolved for 0
Entry for 1
Resolved for 1
Resultado esperado. El bucle for
ha esperado a que todas las Promise
dentro de él se resuelvan antes de iterar al siguiente elemento del array.
Solución en tu escenario
let contador = 0;
let cap = 10;
for await (let g of matchList) {
if (contador < cap) {
try {
const { data } = await ApiComponent.getGameData(g.gameId);
const { count, match } = data;
if (count) {
contador++;
}
temp.push(match);
} catch (e) {
console.error(`Error en fetch Game data`, e);
}
} else {
console.log("cap");
break;
}
}
Algunas cosas a comentar aquí.
- La sintaxis
async
/await
nos habilita el try
/catch
en caso de que una Promise
dé error (llame internamente a su función reject
). De este modo el código queda un poco más limpio.
- Al estar usando la keyword
await
en el for
, la función que contenga el loop asíncrono deberá ser async
, también. Es decir, este código devuelve implícitamente una Promise
, que se resolverá una vez el loop termine (ya sea porque se ha iterado sobre todos los elementos, o se ha llamado al break
).
- He añadido el
break
en caso de que se excede el límite de capacidad. De este modo nos ahorramos iteraciones.
- En el
catch
, en vez de un console.log
llamo a console.error
, que está pensado para este tipo de casos. El mensaje aparece en rojo en la consola. También he añadido que se imprima el error, de modo que se pueda ver qué sucedió.
Espero que sirva.
Lo prometido es deuda, no me olvido.
Vamos a ver qué aproximación hacemos de la función map
del prototype Array
.
const map = (arr, callback) => {
let stack = [];
for (let e of arr) {
const r = callback(e);
stack = [...stack, r];
}
return stack;
}
Esta es la aproximación. Obviamente, la función map
pasa como argumento no sólo el elemento actual, sinó también el índice y el array actual.
Pero con esta aproximación podemos jugar. ¿Cómo la podríamos hacer asíncrona? Haciendo uso del for await ... of
, nuevamente.
const mapAsync = async (arr, callback) => {
let stack = [];
for await (let e of arr) {
const r = await callback(e);
stack = [...stack, r];
}
return stack;
}
Inclusive, si fuera algo que necesitásemos a menudo, podríamos añadirlo al prototype de Array
para usarlo con cualquier array que queramos de una forma más cómoda.
Array.prototype.mapAsync = async function(callback) {
let stack = [];
for await (let e of this) {
const r = await callback(e);
stack = [...stack, r];
}
return stack;
}
Podemos ver ahora el ejemplo de antes que usábamos el map
de Array
y no nos funcionaba. Si usamos nuestro mapAsync
, tenemos el resultado esperado.
const arr = [0, 1, 2];
const constrained = (arr, max) => {
let count = 0;
return () => {
arr.mapAsync(async e => {
if (count < max) {
console.log(`Entry for ${e}`);
await delay(1000);
++count;
console.log(`Resolved for ${e}. Count is now ${count}`);
}
});
}
}
const onlyTwo = constrained(arr, 2);
onlyTwo();
// Entry for 0
// Resolved for 0. Count is now 1
// Entry for 1
// Resolved for 1. Count is now 2
De nuevo, espero que sirva y ayude a aclarar ciertos conceptos.