Detaillierte Erklärung zur Verwendung der asynchronen Funktion in js

Dieses Mal werde ich Ihnen detailliert erklären, wie Sie asynchrone Funktionen in js verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie asynchrone Funktionen in js verwenden?

1. Die ultimative Lösung

Asynchroner Betrieb ist eine problematische Sache in der JavaScript-Programmierung. Es ist so problematisch, dass einige Leute verschiedene vorgeschlagen haben Lösungen und versuchen, dieses Problem zu lösen.

Von der frühesten Callback-Funktion über das Promise-Objekt bis hin zur Generator-Funktion gab es jedes Mal Verbesserungen, aber es fühlt sich unvollständig an. Sie alle weisen zusätzliche Komplexitäten auf und erfordern ein Verständnis der zugrunde liegenden Betriebsmechanismen der Abstraktion.

Bedeutet asynchrone E/A nicht nur das Lesen einer Datei? Warum muss es so kompliziert sein? Der höchste Stand der asynchronen Programmierung besteht darin, dass Sie sich keine Gedanken darüber machen müssen, ob sie überhaupt asynchron ist.

Asynchrone Funktionen sind das Licht am Ende des Tunnels und viele Menschen halten sie für die ultimative Lösung für asynchrone Vorgänge.

2. Was ist die Async-Funktion?

Kurz gesagt ist die asynchrone Funktion der Syntaxzucker der Generatorfunktion.

Im vorherigen Artikel gibt es eine Generatorfunktion, die zwei Dateien nacheinander liest.

var fs = require('fs');
var readFile = function (fileName){
 return new Promise(function (resolve, reject){
  fs.readFile(fileName, function(error, data){
   if (error) reject(error);
   resolve(data);
  });
 });
};
var gen = function* (){
 var f1 = yield readFile('/etc/fstab');
 var f2 = yield readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

wird wie folgt als asynchrone Funktion geschrieben.

var asyncReadFile = async function (){
 var f1 = await readFile('/etc/fstab');
 var f2 = await readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

Nach dem Vergleich werden Sie feststellen, dass die asynchrone Funktion darin besteht, das Sternchen (*) der Generator-Funktion durch asynchron zu ersetzen und yield durch waiting zu ersetzen, und das war's.

3. Vorteile der Async-Funktion

Die Verbesserungen der Async-Funktion gegenüber der Generatorfunktion spiegeln sich in den folgenden drei Punkten wider.

(1) Eingebauter Aktuator. Die Ausführung der Generatorfunktion muss auf dem Executor basieren, daher gibt es die Co-Funktionsbibliothek und die asynchrone Funktion verfügt über einen eigenen Executor. Mit anderen Worten: Die Ausführung asynchroner Funktionen ist genau die gleiche wie bei gewöhnlichen Funktionen, mit nur einer Zeile.

var result = asyncReadFile();

(2) Bessere Semantik. Async und Await haben eine klarere Semantik als Asterisk und Yield. async bedeutet, dass die Funktion einen asynchronen Vorgang enthält, undwait bedeutet, dass der folgende Ausdruck auf das Ergebnis warten muss.

(3) Breitere Anwendbarkeit. Gemäß der Konvention der Co-Funktionsbibliothek kann auf den Yield-Befehl nur eine Thunk-Funktion oder ein Promise-Objekt folgen, während auf den Wait-Befehl der Async-Funktion ein Promise-Objekt und primitive Typwerte (numerische Werte) folgen können , Zeichenfolgen und boolesche Werte, aber Dies entspricht einer synchronen Operation.

4. Implementierung der asynchronen Funktion

Die Implementierung der asynchronen Funktion besteht darin, die Generatorfunktion und den automatischen Executor in eine Funktion zu packen.

async function fn(args){
 // ...
}
// 等同于
function fn(args){ 
 return spawn(function*() {
  // ...
 }); 
}

Alle asynchronen Funktionen können in der zweiten Form oben geschrieben werden, wobei die Spawn-Funktion der automatische Ausführer ist.

Die Implementierung der Spawn-Funktion ist unten angegeben, bei der es sich im Grunde um eine Nachbildung des vorherigen automatischen Executors handelt.

function spawn(genF) {
 return new Promise(function(resolve, reject) {
  var gen = genF();
  function step(nextF) {
   try {
    var next = nextF();
   } catch(e) {
    return reject(e); 
   }
   if(next.done) {
    return resolve(next.value);
   } 
   Promise.resolve(next.value).then(function(v) {
    step(function() { return gen.next(v); });   
   }, function(e) {
    step(function() { return gen.throw(e); });
   });
  }
  step(function() { return gen.next(undefined); });
 });
}

Die Async-Funktion ist eine sehr neue Syntaxfunktion, so neu, dass sie nicht zu ES6, sondern zu ES7 gehört. Derzeit befindet es sich noch im Vorschlagsstadium, die Transcoder Babel und Regenerator unterstützen es jedoch bereits und können nach der Transkodierung verwendet werden.

5. Verwendung der asynchronen Funktion

Wie die Generatorfunktion gibt die asynchrone Funktion ein Promise-Objekt zurück, und Sie können das then verwenden Methode zum Hinzufügen einer Rückruffunktion. Wenn die Funktion ausgeführt wird und auf das Warten stößt, kehrt sie zuerst zurück, wartet, bis der ausgelöste asynchrone Vorgang abgeschlossen ist, und führt dann die nachfolgenden Anweisungen im Funktionskörper aus.

Hier ist ein Beispiel.

async function getStockPriceByName(name) {
 var symbol = await getStockSymbol(name);
 var stockPrice = await getStockPrice(symbol);
 return stockPrice;
}
getStockPriceByName('goog').then(function (result){
 console.log(result);
});

Der obige Code ist eine Funktion zum Abrufen von Aktienkursen. Das Schlüsselwort async vor der Funktion zeigt an, dass es innerhalb der Funktion asynchrone Vorgänge gibt. Beim Aufruf dieser Funktion wird sofort ein Promise-Objekt zurückgegeben.

Das folgende Beispiel gibt einen Wert aus, nachdem die Anzahl der Millisekunden angegeben wurde.

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value)
}
asyncPrint('hello world', 50);

Der obige Code gibt an, dass nach 50 Millisekunden „Hallo Welt“ ausgegeben wird.

6. Hinweise

Das Promise-Objekt hinter dem Befehl „await“ kann dazu führen, dass es abgelehnt wird. Daher ist es am besten, den Befehl „await“ in „try“ einzufügen ...Codeblock abfangen. Der Befehl

async function myFunction() {
 try {
  await somethingThatReturnsAPromise();
 } catch (err) {
  console.log(err);
 }
}
// 另一种写法
async function myFunction() {
 await somethingThatReturnsAPromise().catch(function (err){
  console.log(err);
 });
}

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

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 // 报错
 docs.forEach(function (doc) {
  await db.post(doc);
 });
}

上面代码会报错，因为 await 用在普通函数之中了。但是，如果将 forEach 方法的参数改成 async 函数，也有问题。

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 // 可能得到错误结果
 docs.forEach(async function (doc) {
  await db.post(doc);
 });
}

上面代码可能不会正常工作，原因是这时三个 db.post 操作将是并发执行，也就是同时执行，而不是继发执行。正确的写法是采用 for 循环。

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 for (let doc of docs) {
  await db.post(doc);
 }
}

如果确实希望多个请求并发执行，可以使用 Promise.all 方法。

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 let promises = docs.map((doc) => db.post(doc));
 let results = await Promise.all(promises);
 console.log(results);
}
// 或者使用下面的写法
async function dbFuc(db) {
 let docs = [{}, {}, {}];
 let promises = docs.map((doc) => db.post(doc));
 let results = [];
 for (let promise of promises) {
  results.push(await promise);
 }
 console.log(results);
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Nodejs内存治理步骤详解

Vue页面骨架屏注入步骤详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung zur Verwendung der asynchronen Funktion in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!