Investigo un poco sobre async/await pero estoy confundido. Dice que async/await no bloquea. Miro el ejemplo de función asíncrona de developer.mozilla.org. referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 2000); }); } async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); //uncomment this code to see promise result //resolveAfter2Seconds().then(result=>{ //console.log(result); //}); console.log('calling end'); } asyncCall();
el resultado async/await es
> "calling" > "resolved" > "calling end"
pero el resultado de la promesa es
> "calling" > "calling end" > "resolved"
Entonces, si async/await no bloquea, ¿por qué no consuela "finalizar llamada" antes de "resolver"?
Su código Promise no es el mismo que el de la variante asíncrona.
async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); console.log('calling end'); }
seria lo mismo que
function asyncCall() { console.log('calling'); resolveAfter2Seconds() .then(result => { console.log(result); console.log('calling end'); }); }
como mencionó @zhulien, la palabra clave await
es la magia.
Para entenderlo mejor ejecuta el siguiente código:
con await
asyncCall(); console.log("this log you will see right after 'calling' log");
sin await
(simplemente elimine await
en asyncCall; sabe que está bien usar async sin await, pero no al revés).
asyncCall(); console.log("this log you will see right after 'calling end' log");
entonces, en el mismo cierre, cualquier cosa después de la await
se bloqueará, mientras que en el flujo de código continúa llamando a la función y eso es lo que el documento significaba como no bloqueante :)