Comprendre les opérations asynchrones et utiliser async/await en JavaScript

Comme vous le savez déjà, JavaScript est un langage à thread unique et il peut effectuer une action à la fois. Cependant, de nombreuses opérations de développement Web, notamment l'extraction de données d'un serveur ou la lecture de fichiers sur le disque, peuvent prendre un certain temps. S'il effectue ces opérations de manière synchrone, ce qui signifie que JavaScript doit attendre que l'opération soit terminée avant de passer à la ligne de code suivante, cela ralentira la réactivité de l'application. Pour accomplir ces tâches plus efficacement, JavaScript utilise une technique de programmation asynchrone.

Que sont les opérations asynchrones ?

Les opérations asynchrones sont des opérations qui sont initiées à l'heure actuelle mais autorisées à se terminer à un autre moment pendant que le programme continue avec d'autres lignes de code. En JavaScript, la gestion du comportement asynchrone se fait grâce à l'utilisation de rappels, de promesses et, dernièrement, de la syntaxe async/wait. Cette approche permet au JavaScript d'effectuer des tâches en arrière-plan, améliorant ainsi les performances globales des applications Web.
Par exemple, considérons le cas d'une application Web où les informations sur un utilisateur doivent être récupérées à partir de la base de données. Ce processus peut prendre quelques secondes en fonction de la vitesse du réseau ou du trafic élevé vers le serveur. JavaScript peut continuer avec le reste du code au lieu d'arrêter l'application pendant qu'elle attend la réception des données. Ce type de comportement non bloquant est l'idée de base de la programmation asynchrone.

Présentation de async/wait

La syntaxe async/await, qui fait partie de ES2017 (ES8), est sans doute le moyen le plus élégant et le plus facile à comprendre pour gérer le code asynchrone. Il est basé sur des promesses et permet de ressembler au code asynchrone comme au code synchrone pour une compréhension et une maintenance faciles.
Une fonction asynchrone est une fonction qui a la Promise comme type de retour. Le mot-clé async lorsqu'il est attaché à une fonction indique au programme que la fonction renverra toujours une promesse, qu'une promesse soit réellement renvoyée ou non. Await est utilisé dans une fonction asynchrone pour permettre à la fonction d'attendre qu'une promesse soit terminée ou rejetée.

Comment fonctionne async/await ?

Maintenant, permettez-moi d'illustrer avec un exemple comment utiliser async/await. Considérez l'extrait de code suivant qui récupère le panier d'un utilisateur et l'affiche :

Dans cet exemple, la fonction getCart est déclarée asynchrone, elle peut donc utiliser le mot-clé wait pour gérer les opérations asynchrones en son sein.

1. const cart = wait req.user.getCart(); : Ceci appelle la méthode getCart sur l'objet utilisateur, cela récupère l'instance de panier actuelle de l'utilisateur. Le mot-clé wait garantit que JavaScript attend que la promesse renvoyée par getCart() soit terminée. La valeur résolue (le panier de l'utilisateur) est ensuite affectée à la variable panier.
2. const products = wait cart.getProducts(); : De même, cette ligne suspend l'exécution du code jusqu'à ce que la méthode getProducts soit terminée, ce qui amène les produits dans le panier de l'utilisateur. Le mot-clé wait indique au CLR que la ligne de code suivante ne doit pas s'exécuter tant que les données du produit ne sont pas prêtes.
3. Rendu de la réponse : à la fin des deux opérations asynchrones, la variable res.render() est exécutée pour afficher la page du panier à côté des produits.
4. Gestion des erreurs avec try...catch : le bloc try...Enfin, catch est utilisé pour gérer toutes les exceptions pouvant survenir en raison des opérations asynchrones. S'il y a une erreur dans l'une des instructions wait, le bloc catch gère l'erreur et l'enregistre dans la console.

Avantages de l'utilisation de async/await

La syntaxe async/wait offre plusieurs avantages par rapport au code traditionnel basé sur des promesses :La syntaxe async/wait offre plusieurs avantages par rapport au code traditionnel basé sur des promesses :
• Lisibilité améliorée : il est facile à suivre et à comprendre car le code ressemble à du code synchrone normal malgré sa capacité à gérer des opérations asynchrones.
• Gestion des erreurs : l'utilisation de try...Async/await rend la gestion des erreurs aussi simple et uniforme que la détection de l'erreur avec sync/async.
• Simplifie les opérations complexes : async/await doit être utilisé pour le code comportant plusieurs opérations asynchrones, car le code serait plus facile à écrire, tester et déboguer.

结论

异步编程在 JavaScript 中尤其重要，可以在不停止主线程的情况下执行计算密集型操作。 async/await 语法提供了一些更复杂的方法来处理这些操作，并且生成的代码更易读、更干净且更易于调试。 Async/await 帮助开发人员编写异步代码，这使得他们的应用程序更可预测、更快。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!