À mesure que la construction asynchrone / attend gagne en popularité, l'intérêt pour ses mécanismes internes augmente également. Après avoir fouillé sur Internet, il est facile de découvrir que l'asynchronisation / l'attente est basée sur des promesses bien connues et des générateurs, qui sont beaucoup moins connus et populaires.
Le matériel, dont nous publions la traduction aujourd'hui, est consacré aux générateurs. À savoir, ici, nous allons parler de leur fonctionnement et de leur utilisation, ainsi que des promesses, dans les entrailles de la construction asynchrone / attendent. L'auteur de cet article affirme que les générateurs, pour leur application pratique, ne sont pas nécessaires à maîtriser. De plus, il note qu'il s'attend à ce que le lecteur soit un peu versé dans les promesses.
Itérateurs et générateurs
En JavaScript, à partir de la sortie de la norme ES6, plusieurs nouvelles fonctionnalités sont apparues qui visent à simplifier le travail avec les flux et les collections de données asynchrones.
Les itérateurs et les générateurs entrent dans cette catégorie.
Une caractéristique notable des itérateurs est qu'ils fournissent un moyen d'accéder aux éléments de collection un par un, tout en vous permettant de suivre l'identifiant de l'élément en cours.
function makeIterator(array) { var nextIndex = 0; console.log("nextIndex =>", nextIndex); return { next: function() { return nextIndex < array.length ? { value: array[nextIndex++], done: false } : { done: true }; } }; } var it = makeIterator(["simple", "iterator"]); console.log(it.next()); // {value: 'simple, done: false} console.log(it.next()); // {value: 'iterator, done: false} console.log(it.next()); // {done: true}
Ci-dessus, nous passons à la fonction
makeIterator() un petit tableau contenant quelques éléments, après quoi nous le
it.next() avec un itérateur, en appelant la méthode
it.next() . Faites attention aux commentaires démontrant les résultats obtenus à l'aide de l'itérateur.
Parlons maintenant des générateurs. Les générateurs sont des fonctions qui fonctionnent comme des usines d'itérateurs. Prenons un exemple simple, puis parlons de deux mécanismes liés aux générateurs.
function* sample() { yield "simple"; yield "generator"; } var it = sample(); console.log(it.next()); // {value: 'simple, done: false} console.log(it.next()); // {value: 'generator, done: false} console.log(it.next()); // {value: undefined, done: true}
Notez l'astérisque dans la déclaration de fonction. Cela indique que cette fonction est un générateur. Jetez également un œil au mot clé
yield . Il suspend l'exécution de la fonction et renvoie une certaine valeur. En fait, ces deux caractéristiques sont les deux mécanismes dont nous avons parlé ci-dessus:
- Une fonction de générateur est une fonction déclarée à l'aide d'un astérisque à côté du mot-clé de
function ou à côté du nom de la fonction. - L'itérateur de générateur est créé lorsque la fonction de générateur est appelée.
En général, l'exemple ci-dessus illustre le fonctionnement d'une fonction d'usine qui génère des itérateurs.
Maintenant que nous avons compris les bases, parlons de choses plus intéressantes. Les itérateurs et les générateurs peuvent échanger des données dans deux directions. À savoir, les générateurs, à l'aide du mot clé
yield , peuvent renvoyer des valeurs aux itérateurs, mais les itérateurs peuvent également envoyer des données aux générateurs à l'aide de la méthode
iterator.next('someValue') . Voici à quoi ça ressemble.
function* favBeer() { const reply = yield "What is your favorite type of beer?"; console.log(reply); if (reply !== "ipa") return "No soup for you!"; return "OK, soup."; } { const it = favBeer(); const q = it.next().value; // console.log(q); const a = it.next("lager").value; // console.log(a); } // What is your favorite beer? // lager // No soup for you! { const it = favBeer(); const q = it.next().value; // console.log(q); const a = it.next("ipa").value; // console.log(a); } // What is your favorite been? // ipa // OK, soup.
Générateurs et promesses
Maintenant, nous pouvons parler de la façon dont les générateurs et les promesses forment la base de la construction asynchrone / attendent. Imaginez qu'au lieu de renvoyer certaines valeurs à l'aide du mot clé
yield , le générateur renvoie des promesses. Dans cette situation, le générateur peut être encapsulé dans une fonction qui attend la résolution de la promesse et renvoie la valeur de la promesse au générateur dans la méthode
.next() , comme indiqué dans l'exemple précédent. Il existe une bibliothèque populaire,
co , qui effectue exactement de telles actions. Cela ressemble à ceci:
co(function* doStuff(){ var result - yield someAsyncMethod(); var another = yield anotherAsyncFunction(); });
Résumé
Selon l'auteur de ce document, les développeurs JS doivent savoir comment fonctionnent les générateurs, uniquement pour comprendre les caractéristiques de la structure interne de la conception asynchrone / wait. Mais les utiliser directement dans votre propre code n'en vaut pas la peine. Les générateurs introduisent en JavaScript la possibilité de suspendre la fonction et d'y revenir quand (et si) le développeur le juge nécessaire. Jusqu'à présent, en travaillant avec les fonctions JS, nous nous attendions à ce qu'elles soient, lorsqu'elles sont appelées, simplement exécutées du début à la fin. La possibilité de les suspendre est déjà quelque chose de nouveau, mais cette fonctionnalité est commodément implémentée dans la construction async / wait.
Bien sûr, on peut contester cette opinion. Par exemple, l'un des arguments en faveur des générateurs est que la connaissance de leur fonctionnement est utile pour déboguer du code avec async / wait, car les générateurs sont cachés dans cette construction. Cependant, l'auteur du document estime qu'il s'agit néanmoins d'autre chose que de l'utilisation de générateurs en code natif.
Chers lecteurs! Que pensez-vous des générateurs? Peut-être connaissez-vous des options pour leur utilisation qui justifient leur application directe dans le code des projets JS?
Code promotionnel royal pour une remise de 10% sur nos serveurs virtuels:
