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))

Promise weist jedoch immer noch Mängel auf. Es reduziert nur die Verschachtelung, beseitigt die Verschachtelung jedoch nicht vollständig. Wenn beispielsweise mehrere Versprechen nacheinander ausgeführt werden, müssen wir nach der Ausführung der Logik des ersten Versprechens das zweite Versprechen in seiner Funktion then ausführen, wodurch eine Verschachtelungsebene erstellt wird. Darüber hinaus sieht der Code, der Promise verwendet, immer noch asynchron aus. Es wäre großartig, wenn der geschriebene Code synchron werden könnte!

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/Co

durch die Verwendung eines Generators in Kombination mit Promise implementiert. Co ist die Abkürzung für Coroutine, die von Coroutinen in Sprachen wie Python und Lua entlehnt ist. Es kann asynchrone Codelogik synchron schreiben, wodurch das Lesen und Organisieren des Codes klarer und das Debuggen einfacher wird.

const 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.

Die folgenden Pakete müssen sowohl auf der Browser- als auch auf der Node.js-Seite installiert werden.

$ 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.

• Tatsächlich ähnelt die Verwendung von async/await der von co. Sowohl Wait als auch Yield zeigen eine Pause an, und eine Schicht von Async oder Co wird darum herum gewickelt, um anzuzeigen, dass der darin enthaltene Code synchron verarbeitet werden kann . Die Funktion, auf die in async/await gefolgt wird, erfordert jedoch keine zusätzliche Verarbeitung, die Co als Generator schreiben muss.
• Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
Programmieren lernen
• ! !

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!