Un guide pratique d'Aysnc et Await pour les développeurs JavaScript

Introduction

Async et Await sont des mots-clés JavaScript introduits dans ECMAScript 2017 (ES8) qui permettent d'écrire du code asynchrone de manière plus lisible, synchrone et gérable. Ils simplifient les opérations de manipulation qui prennent du temps, comme la récupération de données depuis une API.

Avant de plonger dans le vif du sujet, comprenons d’abord les concepts de programmation synchrone et asynchrone en JavaScript. En programmation synchrone, les tâches sont exécutées séquentiellement, les unes après les autres, dans leur ordre d'apparition. Chaque tâche doit être terminée avant que la suivante ne commence. D'un autre côté, la programmation asynchrone permet aux tâches de s'exécuter en arrière-plan, permettant à JavaScript de continuer à exécuter d'autres tâches sans attendre la fin des précédentes.

Comme nous le savons, JavaScript est un langage monothread, ce qui signifie qu'il ne peut exécuter qu'une seule tâche à la fois. Si tel est le cas, comment JavaScript gère-t-il le code asynchrone ? Ceci est rendu possible par Event Loop, un mécanisme clé qui fonctionne parallèlement à l'environnement d'exécution JavaScript. La boucle d'événements permet d'exécuter des opérations asynchrones sans bloquer le thread principal, garantissant ainsi que JavaScript reste réactif. Sans plus attendre, prenez une tasse de café et passons directement au sujet du jour !

Qu’est-ce qu’Async ?

Pour mieux comprendre ce concept, nous adopterons une approche plus pratique. Avant l'introduction d'async et d'attente, les promesses étaient gérées à l'aide de « l'ancienne méthode », introduite dans ES6 (ECMAScript 2015). Explorons l'exemple ci-dessous.

Le code ci-dessus démontre la syntaxe traditionnelle de gestion des promesses. Le constructeur Promise est utilisé pour créer une nouvelle instance Promise. Il accepte une fonction (appelée fonction exécuteur) comme argument, qui comprend deux paramètres : résoudre et rejeter. Cette fonction d'exécuteur contient la logique de l'opération asynchrone. Dans cet exemple, la résolution est appelée immédiatement, signalant que la promesse s'est terminée avec succès avec une valeur spécifique. Une fois la promesse résolue, la méthode .then est déclenchée, exécutant son rappel pour enregistrer le résultat.

Cependant, cette syntaxe peut être quelque peu délicate à retenir. L'introduction de async/await a simplifié le processus de gestion des promesses, le rendant beaucoup plus facile à lire et à comprendre. Regardons un exemple ci-dessous.

Pour implémenter une fonction asynchrone, nous utilisons le mot-clé async, qui indique à JavaScript qu'il ne s'agit pas d'une fonction régulière mais asynchrone. Le deuxième exemple montre comment la même chose peut être faite à l'aide d'une fonction flèche.

Un autre concept important à noter est le mot-clé wait. async et wait travaillent ensemble pour simplifier la gestion des promesses. Le mot-clé wait ne peut être utilisé que dans une fonction asynchrone ; il ne peut pas être utilisé en dehors d'une fonction ou dans une fonction normale. Il doit toujours apparaître dans une fonction marquée comme asynchrone. Maintenant que nous avons couvert les bases, approfondissons le concept !

Comment ça marche dans les coulisses

De nombreux développeurs JavaScript utilisent régulièrement async/await dans leur code, mais seuls quelques-uns comprennent vraiment comment cela fonctionne sous le capot. C'est là qu'intervient ce tutoriel. Explorons un exemple pour le décomposer.

Dans cet exemple, nous utilisons la méthode .then pour mieux comprendre le fonctionnement des promesses par rapport à l'approche async/await. Lorsque la fonction handlePromise() est appelée, le code s'exécute ligne par ligne. Lorsque JavaScript rencontre la méthode .then, il enregistre le rappel dans la file d'attente des microtâches et passe immédiatement à la ligne suivante, en affichant « hello world ».

Une fois toutes les tâches synchrones terminées, le moteur JavaScript vérifie la file d'attente Microtask pour les tâches en attente. Au bout de cinq secondes, l'opération setTimeout se termine et son rappel est repoussé vers la pile d'appels. À ce stade, la promesse est résolue et le rappel enregistré s'exécute, enregistrant le résultat.

En bref, le moteur JavaScript n’attend pas, il passe directement à la ligne de code suivante. Maintenant, le même comportement s'applique-t-il lors de l'utilisation de async/await, ou cela fonctionne-t-il différemment ? Découvrons-le !

Dans l'exemple ci-dessus, lorsque la fonction handlePromise() est appelée, la première ligne « le début » est imprimée. JavaScript rencontre ensuite le mot-clé wait, qui indique que la fonction est asynchrone et implique une promesse. Il indique que la promesse prendra cinq secondes pour être résolue en raison de setTimeout. À ce stade, la fonction handlePromise() est suspendue (supprimée de la pile d'appels) et tout code après l'attente à l'intérieur de la fonction est mis en pause.

Le moteur JavaScript continue d'exécuter le reste du programme. Après cinq secondes, la promesse est résolue, la fonction suspendue est renvoyée à la pile d'appels et les lignes restantes à l'intérieur de handlePromise() 'La promesse est résolue' et 'la fin' sont exécutées dans l'ordre.

Il est important de noter que la suspension de la fonction ne bloque pas le thread principal. S'il y a un autre code écrit en dehors de la fonction handlePromise(), il s'exécutera pendant que la promesse attend d'être résolue.

L'exemple ci-dessous illustre ce comportement en action :

Dans cet exemple, la première sortie est le début. Lorsque JavaScript rencontre le mot-clé wait, il reconnaît que la promesse prendra cinq secondes pour être résolue. À ce stade, la fonction est suspendue et JavaScript passe à l’exécution de tout code en dehors de la fonction. Du coup, Nous sommes dehors est imprimé ensuite.

Une fois la promesse résolue après cinq secondes, la fonction handlePromise() est restaurée dans la pile d'appels et ses lignes restantes sont exécutées, l'impression de la promesse est résolue suivie de la fin.

Examinons un autre exemple, nous essaierons de faire un appel API avec async/await dans un autre pour mieux comprendre le concept.

Dans le code ci-dessus, le processus d'exécution suit les mêmes principes évoqués précédemment. Lorsque JavaScript rencontre la fonction fetch, il suspend les fonctions getData() et attend que l'appel fetch renvoie un objet de réponse, cet objet contient diverses propriétés telles que le statut, les en-têtes et le corps de la réponse. La fonction reprend ensuite son exécution une fois la réponse disponible.

Le corps de la réponse contient les données dont nous avons besoin, mais elles sont sous forme brute (comme du texte ou du binaire) et ne sont pas immédiatement utilisables. Pour le convertir en objet JavaScript afin de faciliter la manipulation, nous utilisons la méthode .json(), qui analyse la réponse JSON brute. Ce processus implique une autre promesse, c'est pourquoi la deuxième attente est nécessaire. La fonction est à nouveau suspendue jusqu'à ce que la promesse soit résolue.

Une fois les deux promesses remplies, la fonction getData() reprend et les données analysées sont imprimées sur la console. Une façon simple d’expliquer comment fonctionne la récupération, n’est-ce pas ? Maintenant, revenons à notre discussion principale !. Que se passe-t-il si notre réponse API échoue ? Comment gérer les erreurs avec async/await ? Examinons cela dans la section suivante.

Gestion des erreurs avec Async/Await

Traditionnellement, les erreurs dans les promesses étaient traitées à l'aide de la méthode .catch. Mais comment pouvons-nous gérer les erreurs lors de l’utilisation de async/await ? C'est là que le bloc try...catch entre en jeu.

Dans le code ci-dessus, la promesse est enfermée dans un bloc try, qui s'exécute si la promesse est résolue avec succès. Cependant, si la promesse est rejetée, l'erreur est détectée et traitée dans le bloc catch.

Mais saviez-vous que nous pouvons toujours gérer les erreurs de manière traditionnelle ? Voici un exemple :

Pour gérer les erreurs en async/await en utilisant l'approche traditionnelle, vous attachez simplement la méthode catch à la fonction, comme démontré ci-dessus. Il fonctionne de la même manière que le bloc try/catch.

Conclusion

Async/await a révolutionné la façon dont JavaScript gère les opérations asynchrones, rendant le code plus lisible et plus facile à gérer par rapport aux méthodes traditionnelles telles que .then et .catch. En tirant parti de async et wait, nous pouvons écrire du code asynchrone qui semble plus synchrone, améliorant ainsi la clarté globale du code. Tout en comprenant le fonctionnement interne, tel que la boucle d'événements et la file d'attente de microtâches, l'implémentation de async/await est simple et très efficace pour le développement JavaScript moderne. Avec une gestion appropriée des erreurs à l’aide de try/catch ou .catch, nous pouvons gérer en toute confiance les promesses réussies et échouées.

Merci d'être resté dans les parages ! J'espère que cet article a rendu async/wait un peu plus clair pour vous. Je vous souhaite du succès dans vos aventures de codage : allez construire quelque chose d'incroyable !

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!