Uso de Async/Await para un Código Asíncrono Más Limpio
La sintaxis async/await es una forma moderna y más legible de trabajar con promesas en JavaScript. Permite a los desarrolladores escribir código asíncrono que se ve y se comporta como código síncrono. En lugar de encadenar llamadas a then(), se puede utilizar await para pausar la ejecución de una función async hasta que una promesa se resuelva.
Cómo funcionan las funciones async
Una función async es una función declarada con la palabra clave async. Por defecto, retorna una Promise, y se puede utilizar la palabra clave await dentro de ella para pausar la ejecución hasta que la promesa se resuelva.
index.html
index.js
La función fetchData se declara como async, lo que le permite utilizar await para pausar la ejecución hasta que una promesa se resuelva. Aquí, un retraso simulado de 2 segundos imita una operación de obtención de datos. Una vez resuelta, el resultado ("Data fetched successfully!") se muestra en el párrafo HTML.
Simplificación de cadenas de promesas con Async/Await
Al trabajar con múltiples operaciones asíncronas en secuencia, el uso de async/await puede simplificar el código que de otro modo implicaría el encadenamiento de promesas con then().
Veamos cómo una serie de promesas (como obtener y procesar datos) puede gestionarse de manera más clara con async/await.
index.html
index.js
La función processData llama a tres funciones asíncronas—fetchData, processFetchedData y displayProcessedData—una tras otra, esperando (await) que la operación anterior finalice antes de pasar a la siguiente. Este flujo estructurado elimina la necesidad de encadenar promesas, mejorando la legibilidad. El resultado final ("Raw Data processed and displayed on the page") se muestra luego en el HTML.
Manejo de errores con try...catch en Async/Await
El manejo de errores en cadenas de promesas con .catch() puede volverse complicado, especialmente al tratar con múltiples operaciones asíncronas. Con async/await, es posible gestionar los errores utilizando el bloque tradicional try...catch, lo que hace que el manejo de errores sea más intuitivo y legible.
index.html
index.js
En fetchDataWithError, el bloque try ejecuta la operación await, y si tiene éxito, el resultado se muestra en el HTML. Si ocurre un error (como se simula con simulateError), el bloque catch lo gestiona estableciendo el texto del párrafo al mensaje de error ("Error: ¡Algo salió mal!").
1. ¿Qué hace la palabra clave async cuando se añade a una función?
2. ¿Cuál es el propósito de la palabra clave await?
3. ¿Cuál de los siguientes es un beneficio de usar async/await en lugar de encadenar .then()?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you show an example of how to use async/await in a real-world scenario?
How does async/await compare to using plain promises with then() and catch()?
Can you explain how error handling works with async/await in more detail?
Awesome!
Completion rate improved to 2.22Uso de Async/Await para un Código Asíncrono Más Limpio
Desliza para mostrar el menú
La sintaxis async/await es una forma moderna y más legible de trabajar con promesas en JavaScript. Permite a los desarrolladores escribir código asíncrono que se ve y se comporta como código síncrono. En lugar de encadenar llamadas a then(), se puede utilizar await para pausar la ejecución de una función async hasta que una promesa se resuelva.
Cómo funcionan las funciones async
Una función async es una función declarada con la palabra clave async. Por defecto, retorna una Promise, y se puede utilizar la palabra clave await dentro de ella para pausar la ejecución hasta que la promesa se resuelva.
index.html
index.js
La función fetchData se declara como async, lo que le permite utilizar await para pausar la ejecución hasta que una promesa se resuelva. Aquí, un retraso simulado de 2 segundos imita una operación de obtención de datos. Una vez resuelta, el resultado ("Data fetched successfully!") se muestra en el párrafo HTML.
Simplificación de cadenas de promesas con Async/Await
Al trabajar con múltiples operaciones asíncronas en secuencia, el uso de async/await puede simplificar el código que de otro modo implicaría el encadenamiento de promesas con then().
Veamos cómo una serie de promesas (como obtener y procesar datos) puede gestionarse de manera más clara con async/await.
index.html
index.js
La función processData llama a tres funciones asíncronas—fetchData, processFetchedData y displayProcessedData—una tras otra, esperando (await) que la operación anterior finalice antes de pasar a la siguiente. Este flujo estructurado elimina la necesidad de encadenar promesas, mejorando la legibilidad. El resultado final ("Raw Data processed and displayed on the page") se muestra luego en el HTML.
Manejo de errores con try...catch en Async/Await
El manejo de errores en cadenas de promesas con .catch() puede volverse complicado, especialmente al tratar con múltiples operaciones asíncronas. Con async/await, es posible gestionar los errores utilizando el bloque tradicional try...catch, lo que hace que el manejo de errores sea más intuitivo y legible.
index.html
index.js
En fetchDataWithError, el bloque try ejecuta la operación await, y si tiene éxito, el resultado se muestra en el HTML. Si ocurre un error (como se simula con simulateError), el bloque catch lo gestiona estableciendo el texto del párrafo al mensaje de error ("Error: ¡Algo salió mal!").
1. ¿Qué hace la palabra clave async cuando se añade a una función?
2. ¿Cuál es el propósito de la palabra clave await?
3. ¿Cuál de los siguientes es un beneficio de usar async/await en lugar de encadenar .then()?
¡Gracias por tus comentarios!
