Generatorfunktion und Yield-Schlüsselwort in Javascript

Sequenz

Was in Javascript am meisten diskutiert wird, ist die Funktionsweise der asynchronen Programmierung und wie man eine mehrfache Verschachtelung von Rückrufen vermeidet. Sobald Rückrufe für asynchrone Vorgänge häufig verschachtelt sind, wird der Code nicht nur aufgebläht, sondern auch fehleranfällig. Es werden auch ständig verschiedene asynchrone Programmierlösungen vorgeschlagen, wie zum Beispiel das bekannte Promise, Co usw. Der heute besprochene Generator und die Ausbeute beziehen sich auf die asynchrone Programmierung und können uns dabei helfen, die asynchrone Programmierung zu synchronisieren.

Einführung in den Generator

Generator ähnelt in seiner Form einer Funktion, außer dass zwischen der Funktion und dem Funktionsnamen ein zusätzliches * steht. Das Schlüsselwort yield muss innerhalb des Generators verwendet werden. Beispiel:

function * gen(){
  var result1 = yield 'hello';
  var result2 = yield 'world';
  return result1 + result2;
}

Wenn die Generator-Funktion aufgerufen wird, wird der Code innerhalb der Funktion nicht ausgeführt, sondern es wird ein Traverser zurückgegeben, der eine nächste Methode enthält. Jedes Mal, wenn die nächste Methode ausgeführt wird, beginnt der Generator-Funktionskörper mit der Ausführung, bis er auf die yield-Anweisung stößt, die Anweisung ausführt und hier anhält. Die Verwendung ist wie folgt:

var g = gen();
g.next(1);
//{value : 'hello', done : false}
g.next(2);
//{value : 'world', done : false}
g.next();
//{value : 3, done: true}
g.next();
//{value : undefined, done: true}

Der Aufruf der nächsten Methode gibt ein Objekt zurück. Dieses Objekt enthält zwei Attribute: Wert und Fertig. Wert ist der Wert der aktuellen Ertragsanweisung. done gibt an, ob der Generator-Funktionskörper ausgeführt wurde. Die nächste Methode akzeptiert auch einen Parameter, der als Rückgabewert der yield-Anweisung verwendet wird und von nachfolgenden Programmen verwendet werden kann. Wenn das Programm die Ausführung beendet oder auf eine Return-Anweisung stößt, ist value der Rückgabewert des Funktionskörpers und done wird zu true. Wenn zu diesem Zeitpunkt die nächste Methode erneut ausgeführt wird, ist der Wert undefiniert und „Done“ bleibt weiterhin „true“.

Anwendung des Generators beim Traversieren

In js können wir Anweisungen wie for...of zum Traversieren verwenden. Dies liegt tatsächlich daran, dass das Array einen Generator-Traverser enthält . Wenn unser selbstdefiniertes Objekt auch einen Traverser enthält, können wir das benutzerdefinierte Objekt mit Traversalanweisungen wie for...of durchlaufen. Dieser Iterator wird in der Eigenschaft Symbol.iterator gespeichert.

var myArray = {
  0: '你',
  1: '的',
  2: '名字',
  length: 3
};

myArray[Symbol.iterator] = function * (){
  for(var i = 0; i < this.length; i++) {
    yield this[i];
  }
};

for(var item of myArray) {
  console.log(item);
}
//你
//的
//名字

Anwendung des Generators in der asynchronen Programmierung

Der Kern von Javascript ist die asynchrone Programmierung. Jede asynchrone Operation stellt eine Rückruffunktion bereit, um das Ausführungsergebnis zurückzugeben. Angenommen, wir haben mehrere Operationen und die letztere Operation hängt vom Ergebnis der vorherigen Operation ab:

step1(function(value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3)) {
      //some code
    }
  });
})

Ein solcher Code macht das Programm sehr kompliziert, wenn die Verschachtelung von Rückrufen zunimmt verstehen und leicht Fehler machen. Was wir tun müssen, ist den Rückruf abzuflachen. Das Promise-Objekt hat eine solche Funktion:

step1().then(function(value1){
  return step2(value1);
}).then(function(value2){
  return step3(value2);
}).then(function(){
  //some code
})

Wir können sehen, dass die Verschachtelung reduziert wird, aber dies ist nicht die idealste Lösung, wenn wir die asynchrone Operation in Like synchron ändern können Operationen, auch wenn es keine Verschachtelung gibt, wird das Programm leichter verständlich. Die Generatorfunktion bietet uns eine solche Möglichkeit.

function *workflow(){
  var value1 = yield step1();
  var value2 = yield step2();
  var value3 = yield step3();
  //some code
}

Das ist das Ergebnis, das wir wollen. Asynchrone Programmierung ist eine Form der synchronen Programmierung. Als nächstes müssen wir diesen Generator ausführen lassen, also brauchen wir einen Executor. co ist ein Executor, der es Generator ermöglicht, automatisch auszuführen.

co(function *workflow(){
  var value1 = yield step1();
  var value2 = yield step2();
  var value3 = yield step3();
  //some code
});

co hat eine Einschränkung. Auf die yield-Anweisung kann nur ein Promise-Objekt oder eine Thunk-Funktion folgen. Eine ausführlichere Einführung in co finden Sie im Artikel von Teacher Ruan die Co-Funktionsbibliothek. Da diese Methode jedoch weiterhin auf externe Bibliotheksfunktionen angewiesen ist, wurden in ES6 die Schlüsselwörter async undawait vorgeschlagen. Async und Wait sind eigentlich Syntaxzucker für Generator. Es kommt lediglich mit einem eigenen Aktuator. Schreiben Sie den obigen Code in asynchrone Form um:

async function workflow(){
  var value1 = await step1();
  var value2 = await step2();
  var value3 = await step3();
  //some code
}

var result = workflow();

async没有了co的限制。await关键字后面可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。