Async/Await

La syntaxe async/await est une manière moderne et plus lisible de travailler avec les promesses en JavaScript. Elle permet aux développeurs d'écrire du code asynchrone qui ressemble et se comporte comme du code synchrone. Au lieu d'enchaîner les appels then(), vous pouvez utiliser await pour suspendre l'exécution d'une fonction async jusqu'à ce qu'une promesse soit résolue.

Comment fonctionnent les fonctions async

Une fonction async est une fonction déclarée avec le mot-clé async. Elle retourne une Promise par défaut, et vous pouvez utiliser le mot-clé await à l'intérieur pour suspendre l'exécution jusqu'à ce que la promesse soit résolue.

La fonction fetchData est déclarée comme async, ce qui lui permet d'utiliser await pour suspendre l'exécution jusqu'à ce qu'une promesse soit résolue. Ici, un délai simulé de 2 secondes imite une opération de récupération de données. Une fois résolue, le résultat ("Données récupérées avec succès !") est affiché dans le paragraphe HTML.

Simplification des chaînes de promesses avec Async/Await

Lorsqu'on travaille avec plusieurs opérations asynchrones en séquence, l'utilisation de async/await peut simplifier le code qui impliquerait autrement une chaîne de promesses avec then().

Voyons comment une série de promesses (comme la récupération et le traitement de données) peut être gérée plus proprement avec async/await.

La fonction processData appelle trois fonctions asynchrones—fetchData, processFetchedData et displayProcessedData—l'une après l'autre, chacune attendant (await) que l'opération précédente soit terminée avant de passer à la suivante. Ce flux structuré élimine le besoin d'enchaîner les promesses, améliorant ainsi la lisibilité. Le résultat final ("Données brutes traitées et affichées sur la page") est ensuite affiché dans le HTML.

Gestion des erreurs avec try...catch dans Async/Await

Gérer les erreurs dans les chaînes de promesses avec .catch() peut devenir fastidieux, surtout lorsqu'il s'agit de plusieurs opérations asynchrones. Avec async/await, vous pouvez gérer les erreurs en utilisant le bloc traditionnel try...catch, rendant la gestion des erreurs plus intuitive et lisible.

Dans fetchDataWithError, le bloc try exécute l'opération await, et si elle réussit, le résultat est affiché dans le HTML. Si une erreur se produit (comme simulé par simulateError), le bloc catch la gère en définissant le texte du paragraphe sur le message d'erreur ("Erreur : Quelque chose s'est mal passé !").