Promesa asíncrona/espera todo
Por ejemplo, en la función tradicionalFn(), hacemos una llamada asíncrona a la API con el método window.fetch(). Cuando la respuesta vuelve y se analiza en JSON, la registramos en la consola. Inmediatamente después de hacer la llamada, también registramos un mensaje en la consola.
Primero, usemos el operador await con nuestra llamada window.fetch(), y asignemos la respuesta devuelta a la variable response. Nuestra función asíncrona esperará hasta que se devuelva la respuesta antes de continuar.
Si la respuesta es correcta, utilizaremos 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.
Javascript espera
Artículo AccionesFunción asyncLa declaración de función async declara una función async en la que la palabra clave await está permitida dentro del cuerpo de la función. 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.
DescripciónLas funciones async pueden contener cero o más expresiones await. Las expresiones await hacen que las funciones que devuelven promesas se comporten como si fueran síncronas, suspendiendo la ejecución hasta que la promesa devuelta se cumpla o sea rechazada. El valor resuelto de la promesa se trata como el valor de retorno de la expresión await. El uso de async y await permite el uso de bloques try / catch ordinarios alrededor del código asíncrono.
Async/espera
Artículo AccionesFunción asyncLa declaración de función async declara una función async en la que la palabra clave await está permitida dentro del cuerpo de la función. 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.
DescripciónLas funciones async pueden contener cero o más expresiones await. Las expresiones await hacen que las funciones que devuelven promesas se comporten como si fueran síncronas, suspendiendo la ejecución hasta que la promesa devuelta se cumpla o sea rechazada. El valor resuelto de la promesa se trata como el valor de retorno de la expresión await. El uso de async y await permite el uso de bloques try / catch ordinarios alrededor del código asíncrono.
Async await react
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 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 que sea más fácil trabajar con Promises, las funciones async introducen las palabras clave async y await que nos permiten obtener los beneficios de Promises -esperar a que se complete un proceso async antes de continuar- sin la sobrecarga mental de encadenar llamadas .then y anidar Promises.Reactoricemos el código que hemos escrito hasta ahora en este artículo usando 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 async, 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!
