2

EL escenario es el siguiente, tengo un array con ids con los que puedo retirar informacion de una api.

EL problema es que dicha api tiene un rate limit por lo que cada vez que hago una query a dicha api, almaceno los datos en una BD de tal manera que verifico si ya tengo los datos en la base de datos y los proporciono de esta de tal manera que evito querys inecesarias.

Dicho esto, desde el backend siempre indico en la variable count, si se ha tenido que hacer query o viene de base de datos.

En caso de que sea true, hago "contador++" y comparo con el cap para ver si lo he pasado.

El problema es que se ejecutan todas las peticiones de golpe y la verificacion del "if(contador

let contador = 0;
let cap = 10;
await Promise.all(matchList.map(async (g,i)=>{
       
        if(contador<cap){
             await ApiComponent.getGameData(g.gameId).
                then(d=>{
                    //Desde backend se manda count true en caso de que se retire de api y no de base de datos
                    if(d.data.count){
                      contador++;
                     
                    }
                    temp.push(d.data.match);
                    
                }).catch(e=>console.log("Error en fetch Game data"))
        }else{console.log("cap")}
    }))

¿Estoy entendiendo algo mal?

Tenia entendido que con el await no deberia de seguir ejecutandose el codigo.

Un saludo!

1
  • 1
    Te puse un +1 porque siendo usuario nuevo hiciste una pregunta totalmente valida y aparte bien formateada en lo que cabe, felicidades, respecto a... ´tengo entendido que con await no deberia ejecutarse el codigo´, enrealidad await no es un return, await simplemente pausa la ejecucion del codigo y luego la resume.
    – Layer
    Commented el 13 may. 2020 a las 3:42

2 respuestas 2

2

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.

2
  • Muchisimas gracias por tomarte el tiempo de explicarme en profundidad el escenario, seguire tu recomendacion de añadirlo al prototype. Gracias de nuevo.
    – smartz
    Commented el 13 may. 2020 a las 12:33
  • Te haz pulido bastante en tu respuesta, esta mas que excelente +1.
    – Layer
    Commented el 13 may. 2020 a las 16:51
2

No necesitas el await dentro de tu promise, puesto que al usar await no puedes usar .then y .catch si no directamente recibir una respuesta o un error, es decir, cuando tu no usas await tendrias que hacerlo exactamente como lo tienes pero sin el await:

ApiComponent.getGameData(g.gameId)
.then(d=>{
      //Desde backend se manda count true en caso de que se retire de api y no de base de datos
      if(d.data.count){
          contador++;

      }
      temp.push(d.data.match);

}).catch(e=>console.log("Error en fetch Game data"));

Y no tendrias que poner entonces tu funcion dentro de la promise como async.

en caso de querer usar await, entonces aquello de arriba se traduce a esto:

try{
   const d = await ApiComponent.getGameData(g.gameId);

   if(d.data.count){
      contador++;
   }
   temp.push(d.data.match);
}catch(e){
   console.log("Error en fetch Game data");
}

No se sabe que contiene tu variable matchList por lo cual no puedo ayudar mucho mas... sin embargo esto de que "se ejecutan todas las peticiones de golpe" debe ser algún control que esta fallando en el backend, puesto que Promise.all a menos de que estes usando nodejs no tiene el poder para hacer paralelismo (paralelismo significa ejecutar varias tareas simultáneamente), es decir, tus promises se ejecutan en un orden y hasta que no termine una no se ejecuta la otra, y el orden es de acuerdo al orden del array.

De hecho, no estoy seguro, pero una posible razón de este inconveniente, es el hecho de que dentro de map estas ejecutando tus promises y pues map es sincrono y las promises son asíncronas... en cuyo caso puede ayudar el hecho de no hacer esperar a map, asi que tendrias que reformular las comprobaciones que haces... puesto que como estas ejecutando las promises a la vez de cada iteracion de map entonces Promise.all seria casi instantaneo cuando se ejecute, puesto que ya todas las promises habrán sido resueltas para el momento en que map termine, tu mismo las estas ejecutando dentro de cada iteracion de map al hacer await:

await ApiComponent.getGameData(g.gameId).
then(d=>{
    ...
}

Puede este ser el inconveniente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.