Estos días atrás te conté cómo trabajar con las promesas y más tiempo atrás con el patrón callback. Hoy te quiero hablar de async y await en JavaScript, otra forma de lidiar con las llamadas asíncronas.

Vamos a ver con un ejemplo sencillo de cómo funciona con este sistema:

const delay = seconds => {
    return new Promise(
        resolve => setTimeout(resolve, seconds * 1000)
    )
};
const counter = async() => {
    await delay(1);
    console.log('one second');
    await delay(1);
    console.log('two seconds');
    await delay(1);
    console.log('three seconds');
};
counter();

Lo primero que tenemos es una función llamada delay que genera una promesa que tiene un timeout con el número de segundos que se le pasa como parámetro, con el fin de simular nuestra llamada asíncrona. Por otro lado, tenemos una segunda función llamada counter que está marcada con la palabra async, que se utiliza para especificar que tiene llamadas asíncronas en su interior. Lo siguiente que necesitamos dentro de esta función es marcar aquellas sentencias dentro de la misma que son asíncronas y que necesitamos esperar a que terminen. Es decir, las marcamos como await, para que nuestro código no pase a la siguiente línea hasta que tengamos una respuesta.

Este caso es muy simple pero creo que se entiende bien la idea cuando tenemos un tiempo de espera tan claro de por medio. El otro ejemplo que refleja muy bien lo que queremos conseguir es cuando tenemos llamadas a APIs y necesitamos esperar a las mismas para pintar por pantalla su resultado, por lo que encaja muy bien con el método fetch que a su vez implementa el patrón promise.

const repos = async(loginName) => {
    try {
        var response = await fetch(`https://api.github.com/users/${loginName}/repos`);
        var json = await response.json();
        var followerList = json.map(repo => repo.name);
        console.log(followerList);
    } catch (error) {
        console.log(`Error: ${error}`);
    }
};
repos('0gis0');

El resultado será algo parecido a esto:

Si quitáramos las palabras claves async y await de nuestro código y volvieramos a ejecutarlo, tendríamos un error como el siguiente:

Esto es así ya que al no tener las esperas necesarias, para que los datos estén disponibles, el código se seguirá ejecutando sin esperar por la llamada con fetch ni en la devolución del json de la misma.

¡Saludos!