Async/await nodejs
En el último artículo, hablamos del uso de callbacks para implementar funciones asíncronas. Con ese diseño, llamas a la función asíncrona, pasando tu función callback. La función retorna inmediatamente y llama a tu callback cuando la operación ha terminado.
Con una API basada en promesas, la función asíncrona inicia la operación y devuelve un objeto Promise. A continuación, puedes adjuntar manejadores a este objeto promesa, y estos manejadores se ejecutarán cuando la operación haya tenido éxito o haya fallado.Uso de la API fetch()
Para ello, haremos una petición HTTP al servidor. En una petición HTTP, enviamos un mensaje de solicitud a un servidor remoto, y éste nos devuelve una respuesta. En este caso, enviaremos una solicitud para obtener un archivo JSON del servidor. ¿Recuerdas que en el último artículo hicimos peticiones HTTP utilizando la API XMLHttpRequest? Pues bien, en este artículo, utilizaremos la API fetch(), que es el reemplazo moderno, basado en promesas, de XMLHttpRequest.
Tenga en cuenta que Started request… se registra antes de recibir la respuesta. A diferencia de una función sincrónica, fetch() devuelve mientras la petición sigue su curso, permitiendo que nuestro programa siga respondiendo. La respuesta muestra el código de estado 200 (OK), lo que significa que nuestra solicitud tuvo éxito.
¿Qué es async await JavaScript?
Las palabras clave async y await permiten escribir comportamientos asíncronos basados en promesas con un estilo más limpio, evitando la necesidad de configurar explícitamente cadenas de promesas. Las funciones asíncronas también pueden definirse como expresiones.
¿Cuál es la diferencia entre async y await en JavaScript?
Las funciones asíncronas devuelven una promesa. Este estado de la promesa puede ser resuelto o rechazado. 3. Await suspende la ejecución de la función llamada hasta que la promesa devuelva un resultado para esa ejecución.
Javascript async
Debido a que los siguientes pasos tienen que ocurrir dentro de un .then(), cada acción async anida aún más nuestro código, lo que añade una sobrecarga cognitiva y puede hacer que el código sea difícil de refactorizar y mantener a medida que pasa el tiempo.Las funciones async hacen que las Promesas sean más fáciles de usar… Para facilitar el trabajo con Promises, las funciones async introducen las palabras clave async y await que nos permiten obtener los beneficios de las Promises – esperar a que se complete un proceso async antes de continuar – sin la sobrecarga mental de encadenar llamadas .then y anidar Promises.Refactoricemos el código que hemos escrito hasta ahora en este artículo utilizando funciones async para que sea un poco más fácil de leer:async function getData() {
Si ejecutas esto en tu consola, verás que la cosa 1 y la cosa 2 se completan casi al mismo tiempo.Si refactorizamos para usar funciones asíncronas, nuestro código podría tener este aspecto:// no hagas esto en tu código real; ¡es lento!
Esto parece bonito y limpio, pero si lo ejecutamos en nuestra consola nos daremos cuenta de un problema: ¡el código ahora tarda el doble en ejecutarse! Las promesas se ejecutan en paralelo porque no les importa lo que ocurra fuera de ellas – por eso sólo podemos acceder a su contenido dentro de un .then. Esto significa que tanto asyncThing1() como asyncThing2() se ejecutan al mismo tiempo en nuestro primer ejemplo.En las funciones async, await bloquea la ejecución de cualquier código que le siga hasta que la Promise se haya resuelto, lo que significa que nuestro código refactorizado ni siquiera inicia asyncThing2() hasta que asyncThing1() se haya completado – eso no es bueno. ¡Sin embargo, hay buenas noticias: podemos arreglar esto sin renunciar a los beneficios de las funciones asíncronas! // ✅ hacer esto – ¡el código asíncrono se ejecuta en paralelo!
Ejemplo de javascript async/await
Por ejemplo, en la función tradicionalFn(), hacemos una llamada asíncrona a la API con el método window.fetch(). Cuando la respuesta regresa y es analizada en JSON, la registramos en la consola. Inmediatamente después de hacer la llamada, también registramos un mensaje en la consola.
En primer lugar, vamos a utilizar el operador await con nuestra llamada window.fetch(), y asignar la respuesta devuelta a la variable response. Nuestra función asíncrona esperará hasta que la respuesta sea devuelta antes de continuar.
Si la respuesta es correcta, usaremos el operador await con response.json() para obtener el cuerpo de datos JSON del objeto respuesta, y lo asignaremos a la variable data. De nuevo, nuestra función asíncrona esperará a que se complete antes de continuar.
Recuperación asíncrona/en espera
Fundamentos de Async/AwaitPara entender async/await es más fácil empezar con un ejemplo de promesas que se usan y luego convertirlo en async/await. Para empezar vamos a utilizar la siguiente función en todos nuestros ejemplos.function setTimeoutPromise(delay) {
Esta función es simplemente una versión basada en promesas de setTimeout. Ahora vamos a ver cómo encadenamos dos timeouts en los que el segundo espera a que el primero termine.setTimeoutPromise(250).then(msg => {
Si estás familiarizado con las promesas este código no debería ser demasiado confuso. La parte más confusa del código es que estamos devolviendo la segunda promesa de la primera para poder encadenarlas. Ahora este código funciona bien, pero podemos hacerlo mucho más limpio con async/await.doStuff()
Async/Await CaveatsAsync/await es increíble cuando se trata de código asíncrono, pero si necesitas tratar con código asíncrono que se ejecuta en paralelo no funciona.Imagina un escenario en el que estás haciendo un bucle a través de un conjunto de valores y quieres hacer algo con estos valores que es asíncrono.for (let i = 0; i < 10; i++) {
