Tengo dos funciones, a y b , que son asíncronas, la primera sin await y la segunda con await . Ambos registran algo en la consola y devuelven undefined . Después de llamar a cualquiera de las funciones, registro otro mensaje y miro si el mensaje se escribe antes o después de ejecutar el cuerpo de la función.
function someMath() { for (let i = 0; i < 9000000; i++) { Math.sqrt(i**5) } } function timeout(n) { return new Promise(cb => setTimeout(cb, n)) } // ------------------------------------------------- a (no await) async function a() { someMath() console.log('in a (no await)') } // ---------------------------------------------------- b (await) async function b() { await timeout(100) console.log('in b (await)') } clear.onclick = console.clear aButton.onclick = function() { console.log('clicked on a button') a() console.log('after a (no await) call') } bButton.onclick = function() { console.log('clicked on b button') b() console.log('after b (await) call') } <button id="aButton">test without await (a)</button> <button id="bButton">test with await (b)</button> <button id="clear">clear console</button> Si inicia la prueba sin await , la función parece funcionar como si fuera sincrónica. Pero con await , los mensajes se invierten ya que la función se ejecuta de forma asíncrona.
¿Cómo ejecuta JavaScript funciones async cuando no está presente la palabra clave await ?
Caso de uso real: tengo una palabra clave en await que se ejecuta condicionalmente, y necesito saber si la función se ejecuta de forma sincrónica o no para representar mi elemento:
async function initializeComponent(stuff) { if (stuff === undefined) stuff = await getStuff() // Initialize if (/* Context has been blocked */) renderComponent() // Render again if stuff had to be loaded } initializeComponent() renderComponent()PD: el título tiene la palabra clave de JavaScript para evitar confusiones con las mismas preguntas en otros idiomas (es decir, usar async sin esperar )
Una función asíncrona puede contener una expresión de espera, que detiene la ejecución de la función asíncrona y espera la resolución de la Promesa pasada, y luego reanuda la ejecución de la función asíncrona y devuelve el valor resuelto.
Como supuso, si no hay espera, la ejecución no se detiene y su código se ejecutará sin bloqueo.
Todo es síncrono hasta que se ejecuta una función asíncrona de JavaScript. Al usar async-await, await es asíncrono y todo lo que sigue a await se coloca en la cola de eventos. Es similar a .then() .
Para explicarlo mejor, toma este ejemplo:
function main() { return new Promise( resolve => { console.log(3); resolve(4); console.log(5); }); } async function f(){ console.log(2); let r = await main(); console.log(r); } console.log(1); f(); console.log(6); Como await es asincrónico y el resto es sincrónico, incluida la promesa, el resultado es:
1 2 3 5 6 // Async happened, await for main() 4 El comportamiento similar de main() tampoco promete:
function main() { console.log(3); return 4; } async function f(){ console.log(2); let r = await main(); console.log(r); } console.log(1); f(); console.log(5);Producción:
1 2 3 5 // Asynchronous happened, await for main() 4 Simplemente eliminando await hará que toda la función async sea sincrónica, lo que es.
function main() { console.log(3); return 4; } async function f(){ console.log(2); let r = main(); console.log(r); } console.log(1); f(); console.log(5);Producción:
1 2 3 4 5La función se ejecuta igual con o sin await . Lo que hace await es esperar automáticamente a que se resuelva la promesa devuelta por la función.
await timeout(1000); more code here;es aproximadamente equivalente a:
timeout(1000).then(function() { more code here; }); La declaración de la async function simplemente hace que la función devuelva automáticamente una promesa que se resuelve cuando la función regresa.