Itérateurs asynchrones vs générateurs asynchrones en JavaScript

Vous pouvez vous retrouver dans une situation où il est nécessaire de traiter immédiatement certains événements séquentiels plutôt que d'attendre que tous les événements soient générés, par exemple, recevoir des données sur un réseau où un paquet est récupéré à la fois. Dans une telle situation, Bibliothèques javascript tel que RXJS peut aider à gérer le données asynchrones; Cependant, ils mettent également aérien concernant la complexité du code et l'effort cognitif requis pour les maîtriser.

En javascript, Itérateurs asynchrones et Générateurs asynchrones Offrez les mêmes fonctionnalités qui pourraient être implémentées efficacement en utilisant les primitives de la langue javascript. Alors, pourquoi ne pas choisir une solution simple plutôt que de vous mettre dans une autre confusion?

Cet article traite des itérateurs asynchrones vs générateurs asynchrones en JavaScript ainsi que des exemples appropriés. Alors, commençons!

Itérateurs en javascript

En JavaScript, "Itérateurs«Sont utilisés pour accéder aux structures de données synchrones telles que des tableaux, des cartes et des ensembles. Ils sont principalement basés sur le «suivant()«Méthode, qui comprend deux propriétés:«suivant" et "valeur»:

• Le "valeur»Propriété du suivant() La méthode indique la valeur actuelle dans la séquence d'itération.
• Le "fait»Propriété du suivant() La méthode représente le statut d'itération, où «FAUX»Indique que le processus d'itération est terminé et«vrai»Signifie que l'itération est incomplète.

Maintenant, nous allons vérifier le fonctionnement des itérateurs en JavaScript à l'aide d'un exemple.

Exemple: Utilisation des itérateurs en javascript

Nous allons créer un «Nombres«Objet ayant deux propriétés:«commencer" et "fin". Ensuite, nous ajouterons un "capacité d'itération" au "Nombres"Objet en utilisant le"Symbole.iterator ()" méthode.

Le "Symbole.iterator ()«La méthode sera invoquée une fois, au début du«pour… de”Loop, et renvoie un objet itérable. Après avoir effectué cette opération, le «pour… de”Loop accédera à l'objet itérable et récupérera les valeurs dans la séquence d'itération:

Soit nombres =
Démarrer: 1,
fin: 4,
[Symbole.iterator] ()
retour
courant: ceci.commencer,
Dernier: ceci.fin,
suivant()
si ce.actuel <= this.last)
return fait: false, valeur: ceci.actuel ++;
autre
return Done: true;


;

;

Le ci-dessus, "suivant()«La méthode sera invoquée et renvoie le«valeur«En tant qu'objet:

pour (laissez la valeur des nombres)
alerte (valeur);

Écrivez le code fourni dans la fenêtre de la console et exécutez-le:

Nous avons réussi à itération de chaque élément du «Nombres”Objet qui peut être vu dans le GIF suivant:

Comme mentionné précédemment, les itérateurs JavaScript réguliers peuvent vous aider à itérer les données synchrones. Et si les valeurs venaient de manière asynchrone à cause de tout retard? Dans un tel scénario, vous devez implémenter le Itérateurs asynchrones en javascript.

Itérateurs asynchrones en javascript

Les itérateurs asynchrones sont intégrés dans ES9 pour gérer les sources de données asynchrones. Cela fonctionne similaire à l'itérateur régulier, sauf que le «suivant()«La méthode dans un itérateur asynchrone renvoie un«Promesse"Cela résout le"valeur" et "fait»Valeurs de propriétés d'un objet.

Convertir un itérateur régulier en itérateur asynchrone en javascript

Si vous souhaitez convertir un itérateur ordinaire en un itérateur asynchrone, suivez les instructions ci-dessous:

• Au lieu d'utiliser le "Symbole.Iterator ()"Méthode, utilisez"Symbole.asynciterator ()".
• Forcer le «suivant()«Méthode pour renvoyer un Promesse et ajouter un "asynchrone”Mot-clé avec:«Async suivant ()".
• Enfin, le «pour attendre… de«La boucle peut être utilisée pour itérer sur un objet, au lieu du«pour… de" boucle.

Exemple: itérateurs asynchrones en javascript

Nous allons maintenant convertir l'itérateur régulier défini dans l'exemple précédent en itérateurs asynchrones en suivant les règles spécifiées.

À cette fin, nous remplacerons le «Symbole.Iterator ()" avec le "Symbole.asynciterator ()" méthode. Ensuite, nous ajouterons le mot-clé "asynchrone" avant le "suivant()" méthode. En utilisant "attendre" dans le "suivant()«La méthode définira le temps de réaliser la promesse après«2”SECONDES:

Soit nombres =
Démarrer: 1,
fin: 4,
[Symbole.asynciterator] ()
retour
courant: ceci.commencer,
Dernier: ceci.fin,
asynchnure suivante ()
AwaitNewPromise (Resolve => setTimeout (Resolve, 2000));
si ce.actuel <= this.last)
return fait: false, valeur: ceci.actuel ++;
autre
return Done: true;


;

;

Pour itération sur un objet itérable asynchrone, le «pour attendre… de»Loop sera utilisé de la manière suivante:

(async () =>
pour attendre (la valeur des nombres)
alerte (valeur);
) ()

La sortie affichera les valeurs itérées dans la boîte d'alerte après un retard de deux secondes:

À ce stade, vous avez compris le fonctionnement des itérateurs asynchrones. Maintenant, nous allons avancer et apprendre sur Générateurs asynchrones en javascript.

Générateurs en JavaScript

Les itérateurs en JavaScript sont très utiles; Cependant, ils ont besoin d'une programmation minutieuse pour effectuer leurs fonctionnalités attendues. Le Fonction du générateur JavaScript est un autre outil puissant qui vous permet de définir un algorithme itératif à l'aide d'un seul "non continu" fonction.

Initialement, une fonction de générateur n'exécute pas son code lorsqu'elle est invoquée; Au lieu de cela, il renvoie un type spécifique d'itérateur appelé «Générateur". La fonction du générateur peut être invoquée autant de fois que nécessaire, et à chaque appel, il renvoie un nouveau "Générateur,«Qui peut être itéré une fois.

Pour écrire la fonction du générateur, le «fonction*»La syntaxe est utilisée. Cette fonction comprend également un «rendement”Opérateur qui fait une pause l'exécution de la fonction du générateur jusqu'à ce que la valeur suivante d'un objet soit demandée.

Exemple: utilisant des générateurs en javascript

Nous définirons un «Générateur”Fonction qui renvoie les valeurs d'un«point de départ" pour "point final" en utilisant le "rendement»Opérateur. Le "*"Ajouté avec le"fonction«Le mot-clé indique que«Générateur()«Est une fonction de générateur, pas une fonction régulière normale.

Fonction * Générateur (startPoint, endingpoint)
pour (soit i = point de départ; je<= endingPoint; i++)
rendement i;

Dans la prochaine étape, nous invoquerons le «Générateur()»Fonction qui renvoie un générateur stocké dans le«X" objet:

Soit x = générateur (1, 5);

Enfin, pour itérer le «X«Générateur, nous utiliserons le«pour… de" boucle:

pour (consom de x)
console.log (num);

L'exécution du programme fourni montrera les valeurs itérées:

Si vous souhaitez récupérer les résultats basés sur les promesses du «Générateur", Vous devez utiliser"Générateur asynchrone»Dans le programme JavaScript.

Générateurs asynchrones en javascript

Générateur asynchrone Dans JavaScript, fonctionne similaire à la fonction du générateur, sauf que le «suivant()«La méthode dans le générateur asynchrone renvoie un«Promesse"Cela résout le"valeur" et "fait»Valeurs de propriétés d'un objet.

Convertir la fonction du générateur en itérateur asynchrone en javascript

Suivez les instructions fournies ci-dessous pour convertir une fonction de générateur en un itérateur asynchrone en javascript:

• Utiliser "asynchrone" avant le "fonction*" mot-clé.
• Au lieu d'un "valeur","rendement«Devrait retourner un«Promesse".

Maintenant, nous allons vous montrer la procédure pratique pour convertir une fonction de générateur en générateurs asynchrones en JavaScript.

Exemple: générateurs asynchrones en javascript

Tout d'abord, nous ajouterons le «asynchrone»Mot-clé avant de définir le«asyncSequence ()"Fonction asynchrone. L'asyncSequence () donne un «Promesse«Qui sera réalisé en une seconde:

asyncFunction * asyncSequence (startpoint, endingpoint)
pour (soit i = point de départ; i
setTimeout (() =>
résoudre (i);
, 1000);
);

Dernièrement, "pour attendre… de”La boucle est utilisée pour itérer et retourner le générateur asynchrone:

(async () =>
Soit x = asyncSequence (1, 5);
pour attendre (laissez num de x)
console.log (num);

) ();

Ce programme JavaScript renverra des valeurs de «1" pour "5"Tout en faisant une lacune de"un" deuxième:

Nous avons fourni les informations essentielles liées à Itérateurs asynchrones et Générateurs asynchrones. Les deux peuvent cependant être utilisés pour itération sur des données asynchrones en JavaScript; Il peut être difficile pour les débutants de maintenir la logique interne ou la définition des itérateurs asynchrones, tandis que les générateurs asynchrones offrent plus efficace et Moins sujet aux erreurs façon d'utiliser les itérateurs. Il cache également le La complexité de l'itérateur et rend le code concis et lisible.

Alors, nous vous recommandons Utilisez des générateurs asynchrones Pour gérer les itérations liées à la collecte de données asynchrones.

Conclusion

Itérateur asynchronesable Générateurs asynchrones sont utilisés pour itérer les données, fournies après un certain temps. Les itérateurs asynchrones exécutent le «Symbole.asynciterator ()«Méthode pour retourner un«itérateur», Tandis que les générateurs asynchrones renvoient un type spécial d'itérateur«Générateur«En soi, qui peut être utilisé partout où l'itération est requise. Cet article a discuté des itérateurs asynchrones et des générateurs asynchrones en JavaScript.