¿Sabes cuál es la diferencia entre promesas y async y await? En este artículo te contaremos todos los detalles sobre esta cuestión. Pero, antes, debes saber que la asincronía es un concepto que destaca a JavaScript sobre otros lenguajes de programación. Este concepto es importante saberlo, ya que, para manejar los procesos asincrónicos en este lenguaje, existen dos opciones: por un lado las promesas, y por otro, las funciones de tipo async y await.
Así pues, en este post, te explicaremos cuál es la diferencia entre promesas y async y await para que determines cuando usar cada opción.
¿Cuál es la diferencia entre promesas y async y await?
Para explicarte la diferencia entre promesas y async y await, te mostraremos un ejemplo muy básico con una función hello world:
function helloWorldPromise ( ) {
return new Promise (function (resolve, reject) {
resolve ('hello world')
})
}Con las líneas de código anteriores, hemos creado una función helloWorldPromise que nos devuelve una nueva instancia del objeto promise en JavaScript. Además, esta función se está resolviendo automáticamente gracias a la línea de código resolve.
¿Cómo es esto de que se está resolviendo automáticamente? Pues si copias las líneas de código anteriores en la consola de tu inspector web y la ejecutas, obtendrás como respuesta una promesa en estado fulfilled.
Ahora que tenemos estas líneas de ejemplo, veamos cómo se verían usando las palabras clave async y await de las que hemos hablado antes. Ten presente que la siguiente función ejecuta exactamente la misma acción que la función anterior helloWorldPromise:
async function helloWorldAsync ( ) {
return 'hello world'
}Como puedes ver, la función anterior hecha con la palabra clave async es mucho más corta que la creada con una promesa. Por esto es que este tipo de función, junto a su acompañante await, se conocen como azúcar sintáctico, pues aunque no aporta ningún valor adicional sobre la promesa, realmente sí simplifica su sintaxis.
Entonces, ¿exactamente cuál es la diferencia entre promesas y async y await? En términos de sintaxis, que ya no necesitamos declarar una nueva instancia del objeto promise ni declarar métodos como resolve o reject. Otra diferencia es la forma en la que tratamos cada una de estas funciones. A continuación, te mostramos cómo trataríamos cada función para pintar el hello world.
Para tratar una función con promesa, tendríamos que usar el método then, pasarle el mensaje de resolve como parámetro y pintarlo en pantalla:
helloWorldPromise ( ).then (message => { console.log (message) })Por su parte, para tratar una función con async, usaremos la palabra clave await. Este tratamiento, además, lo podemos guardar en una variable let, var o const que nos indique el resultado.
const result = await helloWorldAsync ( )Los tratamientos y funciones anteriores ejecutan exactamente las mismas acciones. Sin embargo, la sintaxis de una es notablemente más sencilla. Ahora, si quieres conocer el proceso para pasar de una sintaxis a otra en un ejemplo un poco más complejo, te invitamos a leer nuestro post sobre transformar promesas con async y await.
Ahora que conoces la diferencia entre promesas y async y await, te invitamos a seguir aprendiendo sobre JavaScript y otros lenguajes de programación fundamentales para el desarrollo web en nuestro Desarrollo Web Full Stack Bootcamp. En este espacio de formación intensiva, aprenderás a desarrollar con lenguajes como JavaScript, HTML, CSS, JSX y muchísimas herramientas que harán la creación de proyectos web más sencilla. ¿Quieres seguir aprendiendo con nosotros? ¡Matricúlate ya y destaca en el sector IT!
