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.

El ejemplo que hemos visto no es muy representativo porque, a pesar de que hemos creado una función asíncrona (con async), ésta se termina ejecutando síncronamente, ya que no hace nada realmente de forma asíncrona.

Si trasladamos el ejemplo anterior a promises sería como si tuviéramos lo siguiente:

function answerAsync() {
   const pr = new Promise((resolve, reject) => {
        console.log('answer is 42')
        resolve()
   });
   return pr;
}

Quizá ahora se observa mejor cómo la función answerAsync no ejecuta nunca nada de forma asíncrona: realiza un console.log (operación que es síncrona) y luego ya devuelve la promise resuelta.

Lo interesante de las funciones asíncronas es que pueden realizar esperas asíncronas: una espera asíncrona consiste en que la función asíncrona se espera hasta que una promise termina. Pero esa espera no es bloqueante, es decir, no bloquea el hilo principal de ejecución, ni por lo tanto, tampoco la página ni la interfaz de usuario.

¿Y qué es lo que podemos esperar asíncronamente? Pues dos cosas:

• La resolución de una promise
• Dado que las funciones asíncronas devuelven una promise, podemos esperar asíncronamente la finalización de una función asíncrona

Para esperas asíncronas usamos la palabra clave await. Vamos a ver un ejemplo para que quede claro.

Veamos la relación entre async/await y las promises. En el fondo, async/await es syntactic sugar, una forma más sencilla de utilizar promises.

Partamos de la siguiente función que devolverá una promise que se resolverá al cabo de los segundos que pasemos por parámetro:

function waitPromise(sec) {
    const pr = new Promise((res, rej) => {
        window.setTimeout(res, sec * 1000);
    });
 
    return pr;
}

Probamos:

console.log("Incio espera");
 
waitPromise(3).then(() => {
    console.log("espera terminada");
});
 
console.log("fin");

Ahora haremos lo mismo usando async / await:

console.log("Incio espera");
 
async function waitAsync() {
    console.log("Dentro de waitAsync, pero antes del await");
    await waitPromise(3);
    console.log("espera terminada");
}
 
waitAsync();
 
console.log("fin");

La salida por consola será:

Inicio espera
dentro de waitAsync, pero antes del await
fin
espera terminada

Vamos a ver un ejemplo: crearemos una función que cargue asíncronamente una página web y que nos devuelva el tiempo (en milisegundos) que ha tardado. Una especie de “ping” a la página.

Observa que se trata de una función normal y corriente que devuelve una promise:

function ping(url) {
    const pr = new Promise((resolve, reject) => {
        const req = new XMLHttpRequest();
        const init = performance.now();
        req.open('GET', url, true);
        req.onreadystatechange = function(){
            if (req.readyState == XMLHttpRequest.DONE) {
                if (req.status == 200) {
                    const end = performance.now();
                    resolve(end-init);
                }
                else {
                    reject(-1);
                }
            }
        }
        req.send();
    })
    return pr;
}

Nota: observa el uso de performance.now(), que te permite obtener el tiempo desde que se cargó el documento. Usando dos valores obtenidos por perfomance.now() y restándolos, obtenemos el tiempo transcurrido entre dos instantes. Consulta la página de la MDN para más información.

Por supuesto, dado que dicha función devuelve una promise podemos usar then:

ping('https://www.google.es')
    .then(r => console.log(`ha tardado ${r}`))
    .catch(() => console.log('ups!!'));

Hasta este punto no hemos visto nada nuevo. Ahora vamos a introducir una espera asíncrona, es decir, vamos a usar await para esperar el resultado de ping:

const test = async() => {
    let ms = await ping('https://reqres.in/api/users');
    console.log("Time: " + ms);
}
 
test();

Fíjate en un par de cuestiones importantes:

• El uso de await para esperar por la promise (devuelta por ping). Observa también cómo await nos devuelve ya el valor resuelto de la promise.
• Para usar await debemos estar en una función asíncrona, es decir, declarada como async. Solo las funciones asíncronas (declaradas con async) pueden efectuar esperas asíncronas.

Y recuerda: el hecho de que test sea una función asíncrona, implica que podemos esperar por ella:

const test = async(uri) => {
    let ms = await ping(uri);
    console.log("Time: " + ms);
}
 
const testm = async() => {
    await test('https://reqres.in/api/users');
    await test('https://reqres.in/api/users');
}
 
testm();

Por supuesto, para que la función testm pueda usar await (y esperar asíncronamente por la función test), ella misma debe ser declarada con async.

Observa cómo el uso de async/await nos facilita el consumo de funciones que devuelven o esperan por promises, pero usar async no convierte una función en “asíncrona” de verdad (en el sentido de que se ejecute concurrentemente o en otro hilo). Usar async en una función f lo que hace es habilitar el uso de await en dicha función y permitir que otras funciones (que a su vez serán async) usen await para esperar por f. Pero en JavaScript lo que habilita el asincronismo de verdad son las promises (o el uso de otras APIs asíncronas anteriores a las promises tales como XMLHttpRequest o setInterval entre otras).

Vamos a realizar un experimento que consiste en capturar el resultado de la función devuelta por waitAsync():

function waitPromise(sec) {
    const pr = new Promise((res, rej) => {
        window.setTimeout(res, sec * 1000);
    });
 
    return pr;
}