Les Promises sont intéressantes mais loin d'être aussi claires que du code synchrone.

Le rêve

Dans le dernier exemple du chapitre précédent, nous obtenons le résultat suivant :

getCurrentCity()
    .then(city => getWeatherInfo(city))
    .then(weatherInfo => console.log(weatherInfo.temperature))
    .catch(error => console.error(error));

... qui est intéressant mais loin d'être aussi clair que du code synchrone :

try {
​
    const city = getCurrentCity();
    const weatherInfo = getWeatherInfo(city);
    
    console.log(weatherInfo.temperature);
    
}
catch (error) {
    console.error(error);
}

Fonctionnement d'Async / Await

L'approche "async / await" est un concept introduit en ECMAScript 7 (ou ES2016) et inspiré du C# (on le retrouve dans les langages les plus cools du marché tels que Python).

"async / await" est une "syntactic sugar" autour des Promises permettant d'indiquer explicitement les endroits où une fonction asynchrone attend le résultat d'une Promise. En arrivant à ces endroits, un tick est déclenché et l'"event loop" reprend la main. Quand la Promise est "resolved", la fonction reprend son exécution à l'endroit où elle a été interrompue dès que possible (i.e. : une fois que toutes les tâches empilées dans la "queue" de l'"event loop" sont dépilées).

On obtient alors le résultat suivant :

const getCurrentCity = () => {
    /* Return an already resolved promise. */
    return Promise.resolve('Lyon');
};
​
const getWeatherInfo = (city) => {
    /* Return an already resolved promise. */
    return Promise.resolve({
        temperature: city.length * 6
    });
};
​
const main = async () => {
​
    try {
​
        const city = await getCurrentCity();
        const weatherInfo = await getWeatherInfo(city);
​
        console.log(`${city}: ${weatherInfo.temperature}`);
​
    }
    catch (error) {
        console.error(error);
    }
​
};
​
main()
    .then(() => console.log('Finished'))
    .catch(() => console.error('Failed!'));