Módulo perteneciente al curso Programación avanzada con JavaScript y ECMAScript.

La programación asíncrona es un concepto siempre difícil. Hasta la aparición de las promises no teníamos en JavaScript un mecanismo para declarar asincronismo. Es cierto que disponíamos de un conjunto de APIs asíncronas (como setTimeout o XMLHttpRequest por citar dos), pero no teníamos manera de declarar las nuestras propias.

En el módulo de promises hemos aprendido a declarar funciones asíncronas devolviendo una promise y a esperar por ellas usando then. Pero las promises son relativamente complejas de utilizar y por ello se añadió async/await al lenguaje.

Es importante entender que async/await no habilita ningún escenario nuevo que no se pueda llevar a cabo mediante promises. De hecho async/await está construido sobre las promises, que son el verdadero mecanismo de asincronía en JavaScript. Es por ello que, a pesar de que quizá termines usando básicamente async/await para consumir código asíncrono debes entender cómo funcionan las promises, ya que son lo que hay realmente por debajo.

En este módulo aprenderemos a crear funciones asíncronas usando la sintaxis de async/await y veremos que, como decimos, por debajo, en realidad lo que hay son promises. Es por ello que es importante que todos los conceptos explicados en el módulo de promises los tengas claros antes de abordar este. Repásalos si lo consideras necesario.

¡Allá vamos!

Una función asíncrona es aquélla que se ejecuta asíncronamente y que utiliza implícitamente una promise para devolver su valor. Las funciones asíncronas se definen exactamente igual que las funciones normales salvo que usamos la palabra clave async delante para denotar su naturaleza:

async function answerAsync() {
    console.log('answer is ' + 42)
}

Dado que las funciones asíncronas son también simples funciones, aplicar typeof a una función asíncrona devuelve “function”.

Las funciones asíncronas se invocan exactamente igual que las funciones tradicionales. Es decir, la función anterior la podemos invocar usando simplemente answerAsync().

Si nos fijamos en la imagen anterior, observamos cómo al invocar la función answerAsync el resultado devuelto no ha sido undefined, que es lo que devolvería la versión síncrona/convencional de esa misma función (recuerda que las funciones que no devuelven nada explícitamente devuelven undefined), sino que la función devuelve una promise. En este caso la promise está resuelta al terminar la llamada.

Esto nos permite, por supuesto, aplicar todo lo que conocemos de promises a funciones asíncronas:

answerAsync().then(() => console.log('Answer is written in the console'))

En este caso, una vez la función asíncrona se ha ejecutado, se ejecuta la función indicada dentro del then:

Por lo tanto toda función async devuelve una promise. El resultado devuelto por la función es el resultado que se resuelve con la promise.

En nuestro ejemplo answerAsync no devolvía nada, por lo que devolvía una promise que se resolvía sin valor (en cierta literatura se refiere a dichas promises como Promises Void o Promise<Void>), pero obviamente podemos devolver un valor:

async function answerAsync() {
    return 42;
}
 
answerAsync().then(v => console.log("Value is " + v));

Este código imprime Value is 42 por la consola, ya que la promise devuelta por answerAsync se resuelve con el valor 42.