Générateurs Javascript: les comprendre

TL;DR: l'essence du générateur est contrôle de la suspension de l'exécution du code.

Pour le générateur lui-même, vous pouvez vous référer à .

Pour résumer, il y a trois éléments que vous devriez distinguer: 1. générateur de fonction 2. générateur 3. résultat généré

la fonction Generator est simplement le function avec l'étoile dans sa tête et (facultatif) yield dans son corps.

function *generator() {
  console.log('Start!');
  var i = 0;
  while (true) {
    if (i < 3)
      yield i++;
  }
}

var gen = generator();
// nothing happens here!!

fonction génératrice elle-même ne fait rien d'autre que de retourner un générateur, dans le cas ci-dessus, gen. Pas de sortie de la console ici car seulement après le retour générateurnext méthode est appelée le corps de générateur de fonction va exécuter. Générateur dispose de plusieurs méthodes, dont la plus importante est next. next exécute le code et renvoie l' générateur de résultat.

var ret = gen.next();
// Start!
console.log(ret);
// {value: 0, done: false}

ret ci-dessus est générateur de résultat. Il dispose de deux propriété: value, la valeur que vous donnez en générateur de fonction et done, un drapeau indiquant si le générateur de fonction retour.

console.log(gen.next());
// {value: 1, done: false}
console.log(gen.next());
// {value: 2, done: false}
console.log(gen.next());
// {value: undefined, done: true}

À ce stade, personne n'attendent que vous pour comprendre générateur, du moins, pas asynchrone de puissance du générateur.

pour simplifier, generator a deux caractéristiques:

• on peut choisir de sauter hors d'une fonction et laisser le code extérieur pour déterminer quand revenir dans fonction.
• le contrôle de l'appel asynchrone peut être fait en dehors de votre code

en code,yield saute en dehors de la fonction, et next(val) revient à la fonction et renvoie la valeur à la fonction. Le code extérieur peut gérer l'appel asynchrone et décider du moment approprié pour passer à votre propre code.

Regardez l'exemple de nouveau:

var gen = generator();
console.log('generated generator');
console.log(gen.next().value);
// mock long long processing
setTimeout(function() {
  console.log(gen.next().value);
  console.log('Execute after timer fire');
}, 1000);
console.log('Execute after timer set');

/* result:
    generated generator
    start
    0
    Execute after timer set
    1
    Execute after timer fire
*/

Voir? La fonction generator elle-même ne gère pas le rappel. Le code extérieur faire.

La base est ici. Vous pouvez élaborer ce code pour soutenir l'asynchronisme complet tout en gardant la fonction de générateur comme sync one.

Par exemple, supposons que geturl est un appel asynchrone qui renvoie un promise objet. vous pouvez écrire var html = yield getUrl('www.stackoverflow.com'); ceci dépasse votre code. Et à l'extérieur de code va faire des trucs comme:

var ret = gen.next();
ret.then(function (fetchedHTML) {
  // jumps back to your generator function
  // and assign fetchHTML to html in your code
  gen.next(fetchedHTML);
});

pour un guide plus complet, voir . Et le référentiel de la forme co, galaxy,suspendre et etc.