Escribí un código e intenté encontrar una respuesta esperada para comprender el comportamiento asíncrono.
Numé las líneas de console.log de la manera que pensé que debería aparecer, pero imprimió la línea no. 6 antes de la línea no. 5
La salida real es:
Pensé que vendría como líneas numeradas en código. Pero la línea No. 5 y 6 se intercambian en la ejecución real. ¿Alguien puede explicar por qué?
let waiter=async function (msg){ console.log('inside waiter before calling setTimeout 3') setTimeout(()=>{ console.log('after 2 sec received: ',msg) }, 2000); console.log('inside waiter after calling setTimeout 4') } async function wrapper(){ console.log('wrapper before calling 2') await waiter('Hi There') console.log('wrapper after calling 5') } console.log('outside before calling 1') wrapper(); console.log('outside after calling 6')Debido a que el wrapper es asíncrono y no está await a que se complete, la ejecución del código continúa normalmente, por lo que 6 se registra antes que 5.
Para tener el 5 registrado antes del 6, espere a que se complete el wrapper con await :
console.log('outside before calling 1'); await wrapper(); console.log('outside after calling 6');La función que llama al wrapper debe return o await algo para que JavaScript ceda el control de la ejecución al bucle de eventos. El controlador que proporcionó a setTimeout es iniciado por el ciclo de eventos y no puede comenzar a ejecutarse hasta que la función que está llamando actualmente regrese o espere.
Dado que no await la llamada a wrapper , esta función solo devuelve una promesa, que ignora/descarta al no hacer uso del valor de retorno de wrapper() . Y la ejecución continúa más allá de su punto de ruta 6 antes de que se ejecute el controlador de tiempo de espera.
Si la función en la que reside todo su código de ejemplo es async , entonces podría hacer:
console.log('outside before calling 1'); await wrapper(); console.log('outside after calling 6'); Si await no está disponible en ese nivel, entonces podría usar .then para que se ejecute algo cuando se complete la promesa.
let waiter=async function (msg){ console.log('inside waiter before calling setTimeout 3') setTimeout(()=>{ console.log('after 2 sec received: ',msg) }, 2000); console.log('inside waiter after calling setTimeout 4') } async function wrapper(){ console.log('wrapper before calling 2') await waiter('Hi There') console.log('wrapper after calling 5') } console.log('outside before calling 1'); wrapper().then(() => { consolelog('promise returned by wrapper is now complete 6'); }); console.log('this will still happen before 5 (call it 4b)');