Async / Await

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!'));

await ne peut être utilisé que dans une fonction async.

Une fonction async peut être appelée depuis n'importe quelle fonction et son type de retour sera une Promise.