Utilisation d'Async/Await pour un Code Asynchrone Plus Lisible
La syntaxe async/await est une méthode moderne et plus lisible pour 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.
Fonctionnement des fonctions async
Une fonction async est une fonction déclarée avec le mot-clé async. Elle retourne par défaut une Promise, et il est possible d'utiliser le mot-clé await à l'intérieur pour suspendre l'exécution jusqu'à la résolution de la promesse.
index.html
index.js
La fonction fetchData est déclarée comme async, ce qui lui permet d'utiliser await pour suspendre l'exécution jusqu'à la résolution d'une promesse. Ici, un délai simulé de 2 secondes imite une opération de récupération de données. Une fois la promesse résolue, le résultat ("Data fetched successfully!") est affiché dans le paragraphe HTML.
Simplification des chaînes de promesses avec Async/Await
Lors de l'utilisation de plusieurs opérations asynchrones en séquence, l'utilisation de async/await permet de simplifier un code qui impliquerait autrement un chaînage 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 de manière plus claire avec async/await.
index.html
index.js
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, ce qui améliore la lisibilité. Le résultat final ("Raw Data processed and displayed on the page") est ensuite affiché dans le HTML.
Gestion des erreurs avec try...catch dans Async/Await
La gestion des erreurs dans les chaînes de promesses avec .catch() peut devenir fastidieuse, en particulier lors du traitement de plusieurs opérations asynchrones. Avec async/await, il est possible de gérer les erreurs en utilisant le bloc traditionnel try...catch, rendant la gestion des erreurs plus intuitive et lisible.
index.html
index.js
Dans fetchDataWithError, le bloc try exécute l'opération await et, en cas de succès, 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 ("Error: Something went wrong!").
1. Que fait le mot-clé async lorsqu'il est ajouté à une fonction ?
2. Quel est le but du mot-clé await ?
3. Lequel des éléments suivants est un avantage de l'utilisation de async/await par rapport à l'enchaînement de .then() ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you show an example of how to use async/await in a real-world scenario?
How does async/await compare to using plain promises with then() and catch()?
Can you explain how error handling works with async/await in more detail?
Awesome!
Completion rate improved to 2.22Utilisation d'Async/Await pour un Code Asynchrone Plus Lisible
Glissez pour afficher le menu
La syntaxe async/await est une méthode moderne et plus lisible pour 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.
Fonctionnement des fonctions async
Une fonction async est une fonction déclarée avec le mot-clé async. Elle retourne par défaut une Promise, et il est possible d'utiliser le mot-clé await à l'intérieur pour suspendre l'exécution jusqu'à la résolution de la promesse.
index.html
index.js
La fonction fetchData est déclarée comme async, ce qui lui permet d'utiliser await pour suspendre l'exécution jusqu'à la résolution d'une promesse. Ici, un délai simulé de 2 secondes imite une opération de récupération de données. Une fois la promesse résolue, le résultat ("Data fetched successfully!") est affiché dans le paragraphe HTML.
Simplification des chaînes de promesses avec Async/Await
Lors de l'utilisation de plusieurs opérations asynchrones en séquence, l'utilisation de async/await permet de simplifier un code qui impliquerait autrement un chaînage 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 de manière plus claire avec async/await.
index.html
index.js
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, ce qui améliore la lisibilité. Le résultat final ("Raw Data processed and displayed on the page") est ensuite affiché dans le HTML.
Gestion des erreurs avec try...catch dans Async/Await
La gestion des erreurs dans les chaînes de promesses avec .catch() peut devenir fastidieuse, en particulier lors du traitement de plusieurs opérations asynchrones. Avec async/await, il est possible de gérer les erreurs en utilisant le bloc traditionnel try...catch, rendant la gestion des erreurs plus intuitive et lisible.
index.html
index.js
Dans fetchDataWithError, le bloc try exécute l'opération await et, en cas de succès, 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 ("Error: Something went wrong!").
1. Que fait le mot-clé async lorsqu'il est ajouté à une fonction ?
2. Quel est le but du mot-clé await ?
3. Lequel des éléments suivants est un avantage de l'utilisation de async/await par rapport à l'enchaînement de .then() ?
Merci pour vos commentaires !
