Comprendre les fonctions asynchrones / attend dans JavaScript | Expliqué avec des exemples
Asynchrone Mot-clé lorsqu'il est utilisé à partir de la définition d'une fonction, la fonction renvoie un Promesse, alors que attendre La fonction fait que la fonction asynchrone attend qu'une promesse soit retournée à l'intérieur. Pour comprendre l'utilisation des fonctions asynchrones et attendre, vous devez avoir une compréhension approfondie du fonctionnement des promesses en JavaScript.
Async and Await est un concept JavaScript de niveau avancé, c'est pourquoi nous allons l'apprendre à travers divers exemples et le comprendre en passant par l'exemple ligne par ligne.
Exécution séquentielle en javascript
JavaScript est une exécution séquentiellement ou nous pouvons dire un langage de script à thread unique. Le code est invoqué ligne par ligne de manière procédurale.
Considérez les lignes de code tapées ci-dessous:
fonction bonjour ()console.Log ("Hello World");
LinuxHint ();
fonction linuxhint ()
console.log ("tutoriel par LinuxHint");
console.log ("Le code est exécuté dans la séquence qu'il est invoqué");
Bonjour();
Observez la sortie sur la console comme:
Comme vous pouvez le voir, les fonctions ou les lignes invoquées en premier ont toujours été terminées en premier. La raison de vous montrer un exemple simple comme celui-ci était de vous faire remarquer lorsque la séquence d'exécution changera avec Async attend et promet.
Asynchrone / attendre en action
Considérez une fonction simple qui renvoie du texte, comme:
fonction getUsers ()console.log ("à l'intérieur de la fonction getUsers");
retourner "utilisateurs";
console.log ("Démarrage du code");
var list = getUsers ();
console.log (liste);
console.log ("fin du code");
La sortie du code suivant est:
Comme nous pouvons voir la fonction renvoyée comme la chaîne qui dit, les utilisateurs. Essayons de mettre le mot-clé asynchrone avant la définition de la fonction comme:
fonction asynchrone getUsers ()console.log ("à l'intérieur de la fonction getUsers");
retourner "utilisateurs";
Maintenant, sur votre console, vous verrez que cette fois-ci, la fonction a renvoyé une promesse qui avait le statut «rempli»:
Mais dans les cas où vous récupérez certaines données d'une API REST ou de toute API Web, cette promesse changera plusieurs états, de l'ensemble à la fin / rejetée. Dans de tels cas, nous attendons le retour du résultat de la promesse en utilisant le attendre mot-clé.
Pour cela, nous allons utiliser l'API Fetch et récupérer les informations sur les utilisateurs de «l'API.github / utilisateurs »avec les lignes de code suivantes:
fonction asynchrone getUsers ()console.log ("à l'intérieur de la fonction getUsers");
const Response = attendre fetch ("https: // api.github.com / utilisateurs ");
console.log ("API a répondu, les utilisateurs reçus");
utilisateurs const = attendre la réponse.JSON ();
console.log ("converti json");
retourner les utilisateurs;
Il y a beaucoup de choses à expliquer ici:
- Lorsqu'une nouvelle variable est initialisée avec cette fonction, la première ligne sera exécutée et le texte sera imprimé sur la console.
- Lorsque le code atteint le mot-clé attendre Il vérifiera si la promesse est tenue ou en attente, si elle est à l'état en attente, il quittera cette fonction et exécutera d'autres parties du code.
- Après avoir exécuté d'autres parties du code, il reviendra à l'intérieur de la fonction au premier mot-clé et revérifiez le statut de la promesse.
- Lors de la réception d'un statut réalisé / rejet, il exécutera la ligne suivante qui est console.enregistrer().
- Dans la ligne suivante, réponse.json est également une promesse, elle vérifiera son statut et sur l'état en attente, il quittera la fonction et exécutera les autres parties du code.
- Une fois tout l'autre code exécuté, le pointeur reviendra dans la fonction, vérifiez l'état de réponse.json, et en statut rempli / rejeté, il exécutera la ligne suivante.
De cette façon, tout ce programme quittera l'exécution séquentielle normale et implémentera une exécution asynchrone du code en utilisant des promesses et asynchrone / attendre mots clés.
L'extrait de code complet est comme:
fonction asynchrone getUsers ()console.log ("à l'intérieur de la fonction getUsers");
const Response = attendre fetch ("https: // api.github.com / utilisateurs ");
console.log ("API a répondu, les utilisateurs reçus");
utilisateurs const = attendre la réponse.JSON ();
console.log ("converti json");
retourner les utilisateurs;
console.log ("Code démarre");
var list = getUsers ();
console.log ("Liste des variables créée");
console.log (liste);
liste.alors ((utilisateur) => console.log (utilisateur));
console.log ("dernière ligne du code");
Note: La ligne "liste.alors ((utilisateur) => console.log (utilisateur));"Ne sera pas exécuté avant la fonction getusers traite toutes les promesses et renvoie la valeur, même ici, l'exécution séquentielle modifiera.
Maintenant, si vous exécutez ce programme en tant que script d'un fichier HTML, vous verrez la sortie suivante sur votre console:
Examinez la sortie de près et vous remarquerez le flux d'exécution comme:
- Le code démarre et la variable est déclarée sur la fonction.
- Le pointeur entre dans la fonction, imprime la première ligne, voit le attendre mot-clé, quitte la fonction et renvoie une promesse en attente à la variable "liste"Que nous venons de créer.
- Exécute d'autres parties du code (c'est pourquoi vous pouvez voir "Dernière ligne du code») En attendant la promesse dans le attendre.
- Voit la ligne liste.alors() Mais il ne sera exécuté que par la fonction getusers Renvoie une promesse avec un statut résolu / rejeté.
- Revenez à l'intérieur de la fonction, l'API répond, crée une liste d'utilisateurs et la convertit en JSON.
- Le statut des promesses renvoyées par la fonction asynchrone getusers changements à accomplir et à liste.alors() Ligne exécutée et nous obtenons les données JSON imprimées sur la console.
C'est ainsi que vous modifiez l'exécution séquentielle et implémentez l'exécution asynchrone
Conclusion
Asynchrone et attendre Des mots clés sont utilisés pour implémenter l'exécution asynchrone du code JavaScript à l'aide de promesses. Asynchrone mot-clé lorsqu'il est utilisé avant la déclaration d'une fonction convertit qui fonctionne en un fonction asynchrone Et son type de retour se transforme en promesse. Alors que attendre est un mot-clé qui attend qu'une promesse soit reçue à l'intérieur d'un fonction asynchrone. Asynchrone / attendre Aidez-nous à écrire des promesses d'une manière beaucoup plus agréable et bien rangée qui est plus lisible et compréhensible.