Async y await en JavaScript

Autor: | Última modificación: 18 de agosto de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!