Heim > Artikel > Web-Frontend > Detaillierte Erklärung, wie async/await in Javascript funktioniert
Verwandte Empfehlungen: „Javascript-Video-Tutorial“
async/await ist eine der wichtigen Funktionen von ES7 und wird derzeit in der Community als hervorragende asynchrone Lösung anerkannt. Derzeit ist die Funktion von async/await bereits eine Empfehlung für Stufe 3. In diesem Artikel erfahren Sie, wie async/await funktioniert. Ich hoffe, Sie haben es geschafft. Generator und Ertrag. Warten auf ES6-bezogenes Wissen. Bevor wir async/await im Detail vorstellen, werfen wir einen Blick auf die derzeit besseren asynchronen Verarbeitungsmethoden in ES6. Im folgenden Beispiel verwendet die Datenanforderung das Anforderungsmodul in Node.js und die Datenschnittstelle verwendet die Repo-Code-Repository-Details-API, die von „Github v3 API-Dokument“ als Beispieldemonstration bereitgestellt wird.
Promises Umgang mit AsynchronitätObwohl das asynchrone IO von Node.js eine gute Unterstützung für hohe Parallelität bietet, macht es auch „Rückrufe“ zu einer Katastrophe und kann leicht zur Rückrufhölle führen. Herkömmliche Methoden wie die Verwendung benannter Funktionen können die Anzahl der Verschachtelungsebenen reduzieren und den Code klarer aussehen lassen. Dies führt jedoch zu einer schlechten Codierungs- und Debugging-Erfahrung. Sie müssen häufig Strg + F verwenden, um die Definition einer benannten Funktion zu finden, was dazu führt, dass das IDE-Fenster häufig nach oben und unten springt. Nach der Verwendung von Promise lässt sich die Anzahl der Verschachtelungsebenen sehr gut reduzieren. Darüber hinaus verwendet die Implementierung von Promise eine Zustandsmaschine, und der Prozess kann durch Auflösen und Zurückweisen in der Funktion gut gesteuert werden. Sie können eine Reihe von Codelogiken in einer sequentiellen Kette ausführen. Das Folgende ist ein Beispiel für die Verwendung von Promise:
const request = require('request'); // 请求的url和header const options = { url: 'https://api.github.com/repos/cpselvis/zhihu-crawler', headers: { 'User-Agent': 'request' } }; // 获取仓库信息 const getRepoData = () => { return new Promise((resolve, reject) => { request(options, (err, res, body) => { if (err) { reject(err); } resolve(body); }); }); }; getRepoData() .then((result) => console.log(result);) .catch((reason) => console.error(reason);); // 此处如果是多个Promise顺序执行的话,如下: // 每个then里面去执行下一个promise // getRepoData() // .then((value2) => {return promise2}) // .then((value3) => {return promise3}) // .then((x) => console.log(x))
Asynchrone Verarbeitung des Generators
Wenn es um Generatoren geht, sollten Sie damit nicht unbekannt sein. Für die Rückrufverarbeitung in Node.js wird das von uns häufig verwendete
TJ/Coconst co = require('co'); const request = require('request'); const options = { url: 'https://api.github.com/repos/cpselvis/zhihu-crawler', headers: { 'User-Agent': 'request' } }; // yield后面是一个生成器 generator const getRepoData = function* () { return new Promise((resolve, reject) => { request(options, (err, res, body) => { if (err) { reject(err); } resolve(body); }); }); }; co(function* () { const result = yield getRepoData; // ... 如果有多个异步流程,可以放在这里,比如 // const r1 = yield getR1; // const r2 = yield getR2; // const r3 = yield getR3; // 每个yield相当于暂停,执行yield之后会等待它后面的generator返回值之后再执行后面其它的yield逻辑。 return result; }).then(function (value) { console.log(value); }, function (err) { console.error(err.stack); });
async/await processing of asynchronousnessObwohl co eine hervorragende asynchrone Lösung in der Community ist, handelt es sich nicht um einen Sprachstandard, sondern um eine Übergangslösung. Die ES7-Sprachebene bietet Async/Warten zur Lösung von Sprachebenenproblemen. Derzeit kann async/await direkt in IE Edge verwendet werden, Chrome und Node.js unterstützen es jedoch noch nicht. Glücklicherweise unterstützt Babel bereits die asynchrone Transformation, sodass wir bei der Verwendung nur Babel einführen müssen. Bevor wir beginnen, müssen wir das folgende Paket vorstellen: Preset-stage-3 enthält die async/await-kompilierten Dateien, die wir benötigen.
$ npm install babel-core --save $ npm install babel-preset-es2015 --save $ npm install babel-preset-stage-3 --save
Es wird empfohlen, die von babel offiziell bereitgestellte Require-Hook-Methode zu verwenden. Das heißt, nach der Eingabe über require werden die nächsten Dateien bei Bedarf von Babel verarbeitet. Da wir wissen, dass CommonJs eine synchrone Modulabhängigkeit ist, ist es auch eine praktikable Methode. Zu diesem Zeitpunkt müssen zwei Dateien geschrieben werden, eine ist die Start-JS-Datei und die andere ist die JS-Datei, die das Programm tatsächlich ausführt.
Starten Sie die Datei index.js
require('babel-core/register'); require('./async.js');
async.js, die das Programm tatsächlich ausführt Sobald ein Wait ausgeführt wird, hält das Programm an und wartet auf den Rückgabewert von Wait und führt dann den darauffolgenden Wait aus.
Die nach Warten aufgerufene Funktion muss ein Versprechen zurückgeben. Darüber hinaus kann diese Funktion eine gewöhnliche Funktion und kein Generator sein.
await kann nur in asynchronen Funktionen verwendet werden. Bei Verwendung in normalen Funktionen wird ein Fehler gemeldet.
Das Promise-Objekt hinter dem Befehl „await“ kann zu einer Ablehnung führen. Daher ist es am besten, den Befehl „await“ in den Codeblock „try...catch“ einzufügen.
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie async/await in Javascript funktioniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!