Einführung in die Verwendung des ES6-Generators (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung des ES6-Generators (mit Beispielen). Ich hoffe, er wird Ihnen als Referenz dienen.

Konzept

Ein Generator wird durch Ausführen einer Generatorfunktion erhalten und ist iterierbar.

function* gen() { 
  yield 'a';
  yield 'b';
  yield 'c';
}

let g = gen(); 
// "Generator { }"

Prinzip und einfache Anwendung

Der Generator verfügt über eine großartige Funktion: Er kann die Ausführung des internen Codes anhalten und einen Wert an die externe Funktion zurückgeben. (Nach dem Anhalten wird die Ausführung anderen Codes nicht verhindert.) Wenn die nächste Methode extern aufgerufen wird, führt sie weiterhin den verbleibenden Code aus und akzeptiert einen Parameter von außen. Diese Implementierung basiert hauptsächlich auf dem Schlüsselwort yield .

Das Schlüsselwort yield bewirkt, dass die Ausführung der Generatorfunktion angehalten wird und der Wert des Ausdrucks, der auf das Schlüsselwort yield folgt, an den Aufrufer des Generators zurückgegeben wird. Man kann es sich als eine Generator-basierte Version des Schlüsselworts return vorstellen.

function* g(){
    var a = yield 2;
    console.log(a);
}

var it = g(); // 返回一个可迭代的生成器对象
console.log(it.next()); // 执行生成器函数内部代码，第一次返回 {done: false, value: 2}
it.next(3); // 继续执行生成器函数内部代码，同时向生成器传递参数3，最后返回 {done: true, value: undefined}

Ein einfacher Zähler

function* count(){
    var n = 1;
    while(true){
        yield n++;
    }
}

var it = count();
it.next(); // 1
it.next(); // 2
it.next(); // 3

Asynchronen Code synchron schreiben

In der Vergangenheit kam es zu asynchronen Ajax-Anfragen Werden verarbeitet, verwenden Sie im Allgemeinen die Methode zur Übergabe der Rückruffunktion. Sobald Sie auf mehrere Ebenen der Rückrufverschachtelung stoßen, wird die Lesbarkeit des Codes beeinträchtigt und das Debuggen wird unpraktisch. Mit dem Generator können wir asynchronen Code synchron schreiben. Das klingt sehr interessant. Unser Code wird so aussehen

function foo(){
    var result = asyncFun(); // asyncFun 是异步函数，result 是异步返回的结果
    console.log(result);
}

Natürlich liefert der obige Code nicht das richtige Ergebnis, es ist nur eine Idee. Wir werden es mit Generatoren machen, und es funktioniert. Denken Sie an die Eigenschaften des Generators:

1. Er kann pausieren und Werte nach außen zurückgeben
2. Er kann weiterhin den verbleibenden Code ausführen und Parameter von außen akzeptieren

Das reicht. Nachdem die Generatorfunktion eingerichtet ist, entwerfen wir jetzt den Code neu:

function* foo(){
    // 这里遇到了异步方法，必须停下来。
    // 等待异步方法执行完毕，并返回结果，继续运行代码。当然，同步 ajax 不能算，它不是异步
    // 输出结果
}

Halten Sie inne und denken Sie über die Schlüsselwörter nach, die sich auf „Pause“ und „Fortfahren“ beziehen. Stopp...weiter...stopp...weiter...stopp...weiter...Nicht...Stopp...Nicht...Stopp...Nicht ...Stop...diese beiden Wörter sind yield, next.

function *foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

Wenn der Code auf yield trifft, wird es sein Angehalten. Zu diesem Zeitpunkt wird die Funktion asyncFun nicht angehalten, sondern ausgeführt. Nach Abschluss der Ausführung wird die Methode next des Generators aufgerufen und das Ergebnis zurückgegeben be Die Parameter werden an next übergeben. Da wir next nicht innerhalb der Generatorfunktion erhalten können, müssen wir globale Variablen verwenden, um next zu übergeben.

var next, gn;

function asyncFun(next){
    // 模拟异步请求
    setTimeout(function(){
        // 返回一个随机数
        next(Math.random())
    }, 1000)
}

function* foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

gn = foo();
next = gn.next.bind(gn);
next(); // 打印随机数

So geschrieben scheint es etwas schwer zu laufen. Sie können eine Wrapper-Funktion schreiben, um eine Generatorfunktion auszuführen, die asynchronen Code enthält.

function asyncFun(next){
  // 模拟异步请求
  setTimeout(function(){
    // 返回一个随机数
    next(Math.random())
  }, 1000)
}

function* foo(){
  var result = yield function(next){asyncFun(next)};
  console.log(result);
}



function wrapFun (gFn){
  var gn = foo(),
      next = gn.next.bind(gn);
  next().value(next);
}

wrapFun(foo);

Demo-Adresse

Seit der Veröffentlichung von Promise und await wird diese Kombination jedoch häufiger verwendet. Auch die Verwendung ist einfacher und der Anwendungsbereich größer.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung des ES6-Generators (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!