Eine detaillierte Einführung in die Verwendung von Async und Wait in Javascript

In diesem Artikel wird hauptsächlich die Verwendung von Async/Awai in Javascript vorgestellt. Interessierte können mehr darüber erfahren.

Async/Await ist eine der wichtigen Funktionen von ES7 , die auch in der Community als hervorragende asynchrone Lösung anerkannt ist. Derzeit ist die Async/Await-Funktion bereits eine Empfehlung der Stufe 3. In diesem Artikel erfahren Sie, wie Async/Await funktioniert. Ich hoffe, Sie verfügen über ES6-bezogene Kenntnisse wie Promise und 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 im Github v3-API-Dokument als Beispieldemonstration bereitgestellt wird.

Asynchrone Verarbeitung von Promise

Obwohl die asynchrone E/A von Node.js eine gute Unterstützung für hohe Parallelität bietet, macht sie auch „Rückrufe“ zu einer Katastrophe, was sehr einfach ist verursachen Rückruf-Hölle. 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 sie 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!

Generator-Umgang mit Asynchronität

Wenn es um Generatoren geht, sollten Sie damit nicht unbekannt sein. Für die Callback-Verarbeitung in Node.js wird das von uns häufig verwendete TJ/Co mithilfe eines Generators in Kombination mit Promise implementiert. Co ist die Abkürzung für Coroutine, die von Python, Lua entlehnt ist. usw. Coroutinen in der Sprache. 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);
});

Asynchrone/wartende Behandlung der asynchronen Verarbeitung

Obwohl co eine ausgezeichnete asynchrone Lösung in der Community ist, handelt es sich nicht um einen Sprachstandard, sondern nur 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 einführen: preset-stage-3 enthält die async/await-kompilierten Dateien, die wir benötigen.

Ob auf der Browser- oder Node.js-Seite, Sie müssen die folgenden Pakete installieren.

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

Startdatei index.js

require('babel-core/register');
require('./async.js');

async.js, die das Programm tatsächlich ausführt

const request = require('request');

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

async function asyncFun() {
 try {
  const value = await getRepoData();
  // ... 和上面的yield类似，如果有多个异步流程，可以放在这里，比如
  // const r1 = await getR1();
  // const r2 = await getR2();
  // const r3 = await getR3();
  // 每个await相当于暂停，执行await之后会等待它后面的函数（不是generator）返回值之后再执行后面其它的await逻辑。
  return value;
 } catch (err) {
  console.log(err);
 }
}

asyncFun().then(x => console.log(`x: ${x}`)).catch(err => console.error(err));

Hinweis:

1. async wird verwendet, um zu deklarieren, dass der Inhalt des Pakets synchron ausgeführt werden kann, während „await“ die Ausführungssequenz steuert. Jedes Mal, wenn ein „await“ ausgeführt wird, hält das Programm an und wartet auf den Rückgabewert von „await“ und führt dann das nachfolgende „await“ aus .

2. Die nach Warten aufgerufene Funktion muss ein Versprechen zurückgeben. Darüber hinaus kann diese Funktion eine gewöhnliche Funktion und kein Generator sein.

3. await kann nur in asynchronen Funktionen verwendet werden. Bei Verwendung in normalen Funktionen wird ein Fehler gemeldet.

4. 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 werden mit einer Schicht aus Async oder Co umschlossen, um anzuzeigen, dass das Der darin enthaltene Code kann synchron verarbeitet werden. Die Funktion, auf die „await“ in „async/await“ folgt, erfordert jedoch keine zusätzliche Verarbeitung, die Co als Generator schreiben muss.

[Verwandte Empfehlungen]

1. Kostenloses Javascript-Video-Tutorial

2. Detaillierte Einführung in die mehrwertige Bewegung des JavaScript-Motion-Frameworks ( 4)

3.Beispielcode für die gemeinsame Nutzung beliebiger Werte mehrerer Objekte im JavaScript-Bewegungsframework (3)

4. So lösen Sie das Anti-Shake-Problem und die Unterbrechung in JavaScript Bewegungsframework Couplet (2)

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die Verwendung von Async und Wait in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!