Comprendre async/await en Javascript
Les mots-clés async et await permettent une simplification de l'utilisation des promesses en Javascript, mais quel est leur fonctionnement ?

Améliorez vos compétences en dev !
Des cours complets, créés par des experts, pour tous niveaux et accessibles en illimité grâce à notre abonnement !
19,99€/mois

Pour comprendre cet article, vous devez connaitre les bases des Promise en Javascript. Si ce n'est pas le cas, consultez mon précédent article !
Pour rappel, une promesse est une sorte de callback générique pour le retours de fonctions asynchrones. C'est l'équivalent d'une fonction avec seulement deux possibilité de sortie : Le succès (resolve), ou l'échec (reject).
Voici un exemple de gestion de promesse sans async/await :
function example(url){
fetch(url).then((response)=>{
return response.json();
}).then((data)=>{
console.log(data);
}).catch((e)=>{
alert(e);
});
}
Et la version avec async/await :
async function(url){
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch(e){
alert(e);
}
}
En regardant les exemples au-dessus, on comprends vite l'intérêt d'utiliser async/await : la lisibilité/simplicité du code.
Et plus les chaines de promesses sont imbriquées, plus la simplification du code est grande !
Mais au final,quels sont les rôles exacts de chacun des mots-clés ? C'est ce que nous allons voir !
Async
La directive async est utilisée pour spécifier que la fonction en question possède un fonctionnement asynchrone.
Plus précisément, lorsque vous ajoutez le mot-clé "async" devant une fonction, vous forcez cette fonction à retourner une promesse, quel que soit le contenu de cette fonction.
Exemple :
async function example1(){
return 0;
}
# est l'équivalent de
function example2(){
return new Promise((resolve, reject)=>{
resolve(0);
});
}
L'exemple utilisé ci-dessus n'a pas d'intérêt fonctionnel, mais démontre l'effet de la directive
Même avec une fonction synchrone, on force la fonction dans un mode asynchrone en enrobant son contenu dans une promesse.
D'ailleurs, vous pouvez vérifiez en examinant le retour de la fonction async une fois exécutée :
console.log(example1());
// $> Promise { 0 }
Mais pourquoi forcer une fonction à retourner une promesse ?
Pour pouvoir utiliser une directive qui fonctionne UNIQUEMENT avec des promesses : le mot-clé "await" !
Await
Cette directive permet simplement de capturer une promesse en cours de traitement, de bloquer l'exécution en attendant la résolution de cette dernière.
Une fois résolue, la valeur reçue sera retournée, pourra être stockée (ou non) et l'exécution pourra continuer. Si la promesse est rejetée, alors l'erreur sera envoyée au prochain bloc de capture des exceptions (catch).
En résumé, await permet de passer d'un fonctionnement asynchrone vers un fonctionnement synchrone.
Comme pour async, voici un code équivalent à await :
// avec await
try {
const user = await signup(...);
return user;
} catch(e){
...
}
# sans await
try {
const user, error;
signup.then((data)=>{
user = data;
}).catch((e)=>{
error = e;
});
while(!user && !error){
//waiting loop
}
return user;
} catch(e){
...
}
Comme l'exemple précédent, celui-ci est purement théorique
Vous l'aurez compris, l'impact sur le code est de bloquer l'exécution et éviter la gestion d'opération en parallèle, lorsque ces dernières n'ont pas besoin de l'être.
Mais il faut faire attention, si vous rendez synchrone des opérations qui auraient pu se dérouler en parallèle, alors vous pourrez ralentir votre exécution de manière significative, comme expliqué dans cet article :

À noter qu'async/await est supporté à 92% par les navigateurs actuels, et n'est pas supporté par Internet Explorer.
J'espère que cet article vous aura été utile, et à bientôt sur le blog !
Les articles les plus populaires du blog
Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !
Voir la sélection 🚀Recevez les articles de la semaine par e-mail pour ne rien manquer !
S'abonner à la newsletter 📧
À propos de l'auteur
Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.
Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !
Photo by Rafael De Nadai on Unsplash