Gracias a su base en la creación de eventos, JavaScript es un lenguaje de programación que nos permite crear asincronía con gran facilidad. Es decir, nos permite programar acciones para ser ejecutadas en tiempos no inmediatos. Sin embargo, aunque la asincronía es una gran herramienta, a veces nos trae problemas de lectura y encadenamiento. Por ello, en este post, te enseñaremos cómo usar las keywords async y await en JavaScript para romper funciones asincrónicas.
¿Qué son async y await en JavaScript?
Async y await en JavaScript son dos palabras clave que nos permiten transformar un código asíncrono para que parezca ser síncrono. Estas palabras clave son muy utilizadas en el contexto de código realizado con promesas.
Como puedes leer en nuestros posts sobre promesas y estados de promesas en JavaScript, estas son un objeto global que nos permite definir situaciones según las que una u otra acción ocurre. Si ninguna de estas acciones sucede, la promesa se rechaza y vemos un error.
Ten presente que la función de la promesa no cambia cuando utilizamos estas palabras clave. Es decir, el código que la hace posible no se modifica y se mantiene asíncrono. Lo que hacen async y await en JavaScript es añadir transparencia en la forma en la que se ejecuta el código de cara al usuario, simulando ser síncrono para facilitarnos la lectura. A continuación, te explicamos exactamente qué hacen las palabras clave async y await en JavaScript.
async
La palabra clave async en JavaScript se utiliza en una función para envolver el contenido de la función en una promesa.
await
La palabra clave await en JavaScript nos permite definir una sección de la función a la cual el resto del código debe esperar. Es decir, con await definimos que el código restante de la función debe esperar a que esta sección se resuelva. Por ello, a nuestros ojos, el código se ejecutará de forma síncrona en la terminal. Si no utilizamos await en una función asincrónica, seguramente el código se ejecutará en desorden, pues el programa continuaría leyendo mientras espera al resultado de una función no inmediata.
¿Cómo utilizar async y await en JavaScript?
Para ejemplificar cómo utilizar async y await en JavaScript, te ponemos un ejemplo. Suponsamos que tenemos la siguiente función doYouLoveMe, que guarda una promesa con el método setTimeout:
function doYouLoveMe (name) {
return new Promise (function (resolve, reject) {
console.log (‘Let me think about it…’)
setTimeout (() => {
if (name = ‘Alberto’) {
resolve (‘Yes!’) {
} else {
reject (‘Sorry but no…’)
}
}, 1000)
})
}
Ahora, queremos gestionar esta promesa utilizando el método then. Esta define qué sucederá cuando la promesa salga bien y cuando la promesa salga mal:
function loveChecker () {
doYouLoveMe (‘Alberto’).then (response => {
console.log (‘Alberto’, response)
}, error => {
console.error (‘Alberto’, error)
})
doYouLoveMe (‘Frodo’).then (response => {
console.log (‘Frodo’, response)
}, error => {
console.error (‘Frodo’, error)
})
}
Entonces, async y await en JavaScript nos permiten reformular nuestro código asíncrono para que parezca ser síncrono a nuestros ojos. Teniendo esto en cuenta, la sintaxis de la función loveChecker se transformaría de la siguiente manera utilizando las keywords async y await:
async function loveChecker () {
try {
let response = await doYouLoveMe (‘Alberto’)
console.log (‘Alberto’, response)
} catche (error) {
console.error (‘Alberto’, error)
}
try {
response = await doYouLoveMe (‘Frodo’)
console.log (‘Frodo’, response)
} catch (error) {
console.error (‘Frodo’, error)
}
}
Puedes advertir que lo primero que debemos hacer es insertar la palabra clave async antes de nuestra función asíncrona. Esto hará que la función esté envuelta en una promesa. Luego, hacemos que la respuesta se guarde en una variable. Es allí donde colocamos el await. En este caso, esta palabra clave está haciendo que el código espere a la resolución de la función doYouLoveMe.
Entonces, antes de ejecutar el console.log de la promesa original, debemos insertar algo como lo siguiente:
let response = await doYouLoveMe (‘Alberto’)
Esta línea de código reemplaza el método then de la promesa original.
A la práctica de lograr que el lenguaje haga cosas por nosotros usando ciertas palabras se le llama sugar syntax. En este caso, estamos haciendo sugar syntax porque utilizamos la palabra async para hacer que el lenguaje envuelva el contenido en una promesa de manera interna. Esta práctica nos quita muchos dolores de cabeza, pues soluciona los problemas que vienen con la asincronía. Uno de los mayores problemas que nos soluciona es el callback hell, creado por la anidación infinita de promesas o condicionales.
¿Te animas a seguir aprendiendo?
Ahora que sabes qué son las palabras clave async y await en JavaScript, ¿te animas a seguir formándote con nosotros? Si es así, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¡Anímate a seguir aprendiendo e inscríbete ahora!
