Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der automatischen Ausführung des Generators in ES6
Detaillierte Erläuterung der automatischen Ausführung des Generators in ES6
- 不言nach vorne
- 2018-10-19 15:10:592161Durchsuche
Dieser Artikel enthält eine detaillierte Erklärung der automatischen Ausführung des Generators in ES6. Ich hoffe, dass er für Freunde hilfreich ist.
Einzelne asynchrone Aufgabe
var fetch = require('node-fetch');
function* gen(){
var url = 'https://api.github.com/users/github';
var result = yield fetch(url);
console.log(result.bio);
}
Um das endgültige Ausführungsergebnis zu erhalten, müssen Sie Folgendes tun:
var g = gen();
var result = g.next();
result.value.then(function(data){
return data.json();
}).then(function(data){
g.next(data);
});
Führen Sie zuerst die Generatorfunktion aus Holen Sie sich das Traverser-Objekt.
Verwenden Sie dann die nächste Methode, um die erste Phase der asynchronen Aufgabe auszuführen, nämlich fetch(url).
Beachten Sie, dass, da fetch(url) ein Promise-Objekt zurückgibt, der Wert des Ergebnisses ist:
{ value: Promise { <pending> }, done: false }
Schließlich fügen wir diesem Promise-Objekt eine then-Methode hinzu und formatieren zunächst die zurückgegebenen Daten . (data.json()) und rufen Sie dann g.next auf, um die erhaltenen Daten zu übergeben, damit die zweite Phase der asynchronen Aufgabe ausgeführt werden kann und die Codeausführung abgeschlossen ist.
Mehrere asynchrone Aufgaben
Wir haben im vorherigen Abschnitt nur eine Schnittstelle aufgerufen. Wenn wir also mehrere Schnittstellen aufrufen und mehrere Ausbeuten verwenden würden, müssten wir nicht kontinuierlich verschachteln in der then-Funktion...
Werfen wir also einen Blick auf die Ausführung mehrerer asynchroner Aufgaben:
var fetch = require('node-fetch');
function* gen() {
var r1 = yield fetch('https://api.github.com/users/github');
var r2 = yield fetch('https://api.github.com/users/github/followers');
var r3 = yield fetch('https://api.github.com/users/github/repos');
console.log([r1.bio, r2[0].login, r3[0].full_name].join('\n'));
}
Um das endgültige Ausführungsergebnis zu erhalten, müssen Sie möglicherweise Folgendes schreiben:
var g = gen();
var result1 = g.next();
result1.value.then(function(data){
return data.json();
})
.then(function(data){
return g.next(data).value;
})
.then(function(data){
return data.json();
})
.then(function(data){
return g.next(data).value
})
.then(function(data){
return data.json();
})
.then(function(data){
g.next(data)
});
Aber ich weiß, dass du es definitiv nicht so schreiben willst...
Tatsächlich können wir es mithilfe der Rekursion so schreiben:
function run(gen) {
var g = gen();
function next(data) {
var result = g.next(data);
if (result.done) return;
result.value.then(function(data) {
return data.json();
}).then(function(data) {
next(data);
});
}
next();
}
run(gen);
Der Schlüssel besteht darin, beim Yield ein Promise-Objekt zurückzugeben, diesem Promise-Objekt eine then-Methode hinzuzufügen und sie auszuführen, wenn der asynchrone Vorgang erfolgreich ist Die onFullfilled-Funktion führt dann g.next in der onFullfilled-Funktion aus und ermöglicht so dem Generator dies Setzen Sie die Ausführung fort, geben Sie dann ein Versprechen zurück, führen Sie g.next bei Erfolg aus und kehren Sie dann zurück...
Starterfunktion
Führen Sie diese Starterfunktion aus, wir formatieren die Daten in der then-Funktion data.json(), aber in allgemeineren Fällen, zum Beispiel folgt auf yield direkt ein Promise und nicht ein Promise, das von der fetch-Funktion zurückgegeben wird, da es keine JSON-Methode gibt, meldet der Code einen Fehler . Um die Vielseitigkeit zu erhöhen, haben wir es zusammen mit diesem Beispiel und Starter wie folgt geändert:
var fetch = require('node-fetch');
function* gen() {
var r1 = yield fetch('https://api.github.com/users/github');
var json1 = yield r1.json();
var r2 = yield fetch('https://api.github.com/users/github/followers');
var json2 = yield r2.json();
var r3 = yield fetch('https://api.github.com/users/github/repos');
var json3 = yield r3.json();
console.log([json1.bio, json2[0].login, json3[0].full_name].join('\n'));
}
function run(gen) {
var g = gen();
function next(data) {
var result = g.next(data);
if (result.done) return;
result.value.then(function(data) {
next(data);
});
}
next();
}
run(gen);
Solange auf yield ein Promise-Objekt folgt, können wir diese Ausführungsfunktion verwenden, um die Generatorfunktion automatisch auszuführen .
Callback-Funktion
Muss nach yield ein Promise-Objekt folgen, um die automatische Ausführung des Generators sicherzustellen? Was ist, wenn es nur eine Rückruffunktion ist? Schauen wir uns ein Beispiel an:
Zuerst simulieren wir eine normale asynchrone Anfrage:
function fetchData(url, cb) {
setTimeout(function(){
cb({status: 200, data: url})
}, 1000)
}
Wir transformieren diese Funktion in:
function fetchData(url) {
return function(cb){
setTimeout(function(){
cb({status: 200, data: url})
}, 1000)
}
}
Für eine solche Generatorfunktion:
function* gen() {
var r1 = yield fetchData('https://api.github.com/users/github');
var r2 = yield fetchData('https://api.github.com/users/github/followers');
console.log([r1.data, r2.data].join('\n'));
}
Wenn Sie das Endergebnis erhalten möchten:
var g = gen();
var r1 = g.next();
r1.value(function(data) {
var r2 = g.next(data);
r2.value(function(data) {
g.next(data);
});
});
Wenn wir so schreiben, stehen wir vor dem gleichen Problem wie im ersten Abschnitt, das heißt, wenn mehrere Erträge verwendet werden, wird der Code sein eingebettet in eine Schleife. Füge es zusammen...
verwendet auch Rekursion, sodass wir es umwandeln können in:
function run(gen) {
var g = gen();
function next(data) {
var result = g.next(data);
if (result.done) return;
result.value(next);
}
next();
}
run(gen);
run
Davon haben wir Sie können sehen, dass die Generatorfunktion für die automatische Ausführung einen Mechanismus erfordert, der automatisch Ausführungsrechte übergeben kann, wenn der asynchrone Vorgang Ergebnisse liefert.
Und es gibt zwei Möglichkeiten, dies zu tun.
(1) Rückruffunktion. Umschließen Sie den asynchronen Vorgang, machen Sie die Rückruffunktion verfügbar und geben Sie die Ausführungsrechte in der Rückruffunktion zurück.
(2) Versprechensobjekt. Wickeln Sie asynchrone Vorgänge in Promise-Objekte ein und verwenden Sie die then-Methode, um Ausführungsrechte zurückzugeben.
In jeder der beiden Methoden haben wir eine Run-Launcher-Funktion geschrieben. Können wir diese beiden Methoden kombinieren und eine allgemeine Run-Funktion schreiben? Versuchen wir es:
rrreeBestimmen Sie, ob result.value ein Promise ist. Wenn nicht, führen Sie es direkt aus.
return Promise
Wir haben eine nette Starterfunktion geschrieben, die yield unterstützt, gefolgt von einer Callback-Funktion oder einem Promise-Objekt.
Nun gibt es eine Frage, über die wir nachdenken müssen: Wie erhalten wir den Rückgabewert der Generatorfunktion? Und wenn in der Generatorfunktion ein Fehler auftritt, z. B. beim Abrufen einer nicht vorhandenen Schnittstelle, wie kann dieser Fehler abgefangen werden?
Das kann man sich leicht vorstellen Promise: Wenn diese Starterfunktion ein Promise zurückgibt, können wir es zu diesem Promise-Objekt hinzufügen Funktion: Wenn alle asynchronen Vorgänge erfolgreich ausgeführt wurden, führen wir die Funktion onFullfilled aus, und wenn ein Fehler auftritt, führen wir die Funktion onRejected aus.
Wir schreiben eine Version:
// 第一版
function run(gen) {
var gen = gen();
function next(data) {
var result = gen.next(data);
if (result.done) return;
if (isPromise(result.value)) {
result.value.then(function(data) {
next(data);
});
} else {
result.value(next)
}
}
next()
}
function isPromise(obj) {
return 'function' == typeof obj.then;
}
module.exports = run;
Sie unterscheidet sich stark von der ersten Version:
Zuerst geben wir ein Promise zurück, wenn result.done wahr ist, wir werden auflösen( result.value) der Wert. Wenn während der Ausführung ein Fehler auftritt und abgefangen wird, lehnen wir den Grund ab.
Zweitens verwenden wir thunkToPromise, um die Rückruffunktion in ein Promise zu verpacken, und fügen dann die then-Funktion einheitlich hinzu. Es ist hier erwähnenswert, dass wir in der thunkToPromise-Funktion dem Prinzip „Error zuerst“ folgen, was bedeutet, dass wir uns mit der Situation der Rückruffunktion befassen:
// 第二版
function run(gen) {
var gen = gen();
return new Promise(function(resolve, reject) {
function next(data) {
try {
var result = gen.next(data);
} catch (e) {
return reject(e);
}
if (result.done) {
return resolve(result.value)
};
var value = toPromise(result.value);
value.then(function(data) {
next(data);
}, function(e) {
reject(e)
});
}
next()
})
}
function isPromise(obj) {
return 'function' == typeof obj.then;
}
function toPromise(obj) {
if (isPromise(obj)) return obj;
if ('function' == typeof obj) return thunkToPromise(obj);
return obj;
}
function thunkToPromise(fn) {
return new Promise(function(resolve, reject) {
fn(function(err, res) {
if (err) return reject(err);
resolve(res);
});
});
}
module.exports = run;
Bei Erfolg sollte der erste Parameter null zurückgeben, was darauf hinweist, dass dies der Fall ist keine Fehlerursache.
Optimierung
Basierend auf der zweiten Version haben wir den Code prägnanter und eleganter geschrieben. Der endgültige Code lautet wie folgt:
// 模拟数据请求
function fetchData(url) {
return function(cb) {
setTimeout(function() {
cb(null, { status: 200, data: url })
}, 1000)
}
}
co
如果我们再将这个启动器函数写的完善一些，我们就相当于写了一个 co，实际上，上面的代码确实是来自于 co……
而 co 是什么？ co 是大神 TJ Holowaychuk 于 2013 年 6 月发布的一个小模块，用于 Generator 函数的自动执行。
如果直接使用 co 模块，这两种不同的例子可以简写为：
// yield 后是一个 Promise
var fetch = require('node-fetch');
var co = require('co');
function* gen() {
var r1 = yield fetch('https://api.github.com/users/github');
var json1 = yield r1.json();
var r2 = yield fetch('https://api.github.com/users/github/followers');
var json2 = yield r2.json();
var r3 = yield fetch('https://api.github.com/users/github/repos');
var json3 = yield r3.json();
console.log([json1.bio, json2[0].login, json3[0].full_name].join('\n'));
}
co(gen);
// yield 后是一个回调函数
var co = require('co');
function fetchData(url) {
return function(cb) {
setTimeout(function() {
cb(null, { status: 200, data: url })
}, 1000)
}
}
function* gen() {
var r1 = yield fetchData('https://api.github.com/users/github');
var r2 = yield fetchData('https://api.github.com/users/github/followers');
console.log([r1.data, r2.data].join('\n'));
}
co(gen);
是不是特别的好用？
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der automatischen Ausführung des Generators in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!