Was sind die beiden asynchronen Verarbeitungsmethoden in JavaScript?

Zwei asynchrone Verarbeitungsmethoden in JavaScript: 1. Verwenden Sie „Promise“, um asynchrone Methoden zu verarbeiten. Dies kann bei der Verwaltung des von asynchronen Methoden zurückgegebenen Codes helfen. 2. Verwenden Sie „async/await“, um asynchrone Methoden zu verarbeiten, und Sie können die synchrone Syntax für asynchrone Methoden verwenden Ereignisse, die es zu bewältigen gilt.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer. „Asynchrone Verarbeitungsmethode von JavaScript“ „Promise“

(2) Promise ist ein Muster, das dabei helfen kann, den zurückgegebenen Code asynchron zu verwalten. Er kapselt den Code und fügt eine Verwaltungsebene ähnlich der Ereignisbehandlung hinzu. Wir können Versprechen verwenden, um Code zu registrieren, der ausgeführt wird, nachdem das Versprechen erfolgreich ist oder fehlschlägt.

(3) Nach Abschluss des Versprechens wird auch der entsprechende Code ausgeführt. Wir können eine beliebige Anzahl von Funktionen registrieren, die bei Erfolg oder Misserfolg ausgeführt werden, und wir können jederzeit Ereignishandler registrieren.

(4) Promise hat zwei Zustände: 1. Warten (ausstehend); 2. Abgeschlossen (erledigt).

Promise bleibt in einem Wartezustand, bis der asynchrone Aufruf, den es umschließt, zurückkehrt/ein Zeitlimit überschreitet/beendet. (5) Zu diesem Zeitpunkt wird der Versprechensstatus abgeschlossen. Der Abschlussstatus ist in zwei Kategorien unterteilt: 1. Gelöst; 2. Abgelehnt.

(6) Versprechen gelöst (aufgelöst): bedeutet, dass es erfolgreich endet. Versprechen abgelehnt (abgelehnt) bedeutet, dass es nicht erfolgreich beendet wurde.

//promise
var p=new Promise(function(resolved))
//在这里进行处理。也许可以使用ajax
setTimeout(function(){
   var result=10*5;
   if(result===50){
      resolve(50);
   }else{
     reject(new Error('Bad Math'));
  }
},1000);
});
p.then(function(result){
    console.log('Resolve with a values of %d',result);
});
p.catch(function(){
   console.error('Something went wrong');
});

(1) Der Schlüssel zum Code liegt im Aufruf von setTimeout().

(2) Wichtig ist, dass er die Funktionen „resolve()“ und „reject()“ aufgerufen hat. Die Funktion „resolve()“ teilt dem Promise-Benutzer mit, dass das Promise aufgelöst wurde; die Funktion „reject()“ teilt dem Promise-Benutzer mit, dass das Promise nicht erfolgreich abgeschlossen werden konnte.

(3) Es gibt auch einige Codes, die Versprechen verwenden. Achten Sie auf die Verwendung von then und Catch. Sie können sie sich als Handler für onsucess- und onfailure-Ereignisse vorstellen.

(4) Das Schlaue daran ist, dass wir die Versprechensverarbeitung vom Status trennen. Mit anderen Worten: Wir können p.then (oder p.catch) so oft aufrufen, wie wir möchten, unabhängig vom Status des Versprechens.

(5) Promise ist die Standardmethode von ECMAscript 6 zur Verwaltung von asynchronem Code. JavaScript-Bibliotheken verwenden Versprechen, um Ajax, Animationen und andere typische asynchrone Interaktionen zu verwalten.

Einfach ausgedrückt besteht die Idee darin, dass jede asynchrone Aufgabe ein Promise-Objekt zurückgibt, das über eine then-Methode verfügt, mit der eine Callback-Funktion angegeben werden kann. Beispielsweise kann die Rückruffunktion f2 von f1 wie folgt geschrieben werden:

f1.then(f2);

f1 sollte wie folgt umgeschrieben werden (implementiert mit jquery):

function f1(){
   var dfd=$.deferred();
   settimeout(function(){
     //f1的任务代码
     dfd.resolve();
　 },500);
  return dfd.promise;  
}

Die Vorteile des Schreibens wie folgt: Die Rückruffunktion ist im Kettenstil geschrieben und Der Programmablauf ist klar zu erkennen und es gibt einen vollständigen Satz unterstützender Methoden, mit denen viele leistungsstarke Funktionen erreicht werden können.

Geben Sie beispielsweise mehrere Rückruffunktionen an

f1().then(f2).then(f3);

Ein weiteres Beispiel: Geben Sie die Rückruffunktion an, wenn ein Fehler auftritt:

f1().then(f2).fail(f3);

Und es hat einen Vorteil, den die vorherigen drei Methoden nicht haben: Wenn eine Aufgabe abgeschlossen wurde, fügen Sie hinzu eine Rückruffunktion, die Rückruffunktion wird sofort ausgeführt.

Sie müssen sich also keine Sorgen machen, ein Ereignis oder Signal zu verpassen.

Nachteile dieser Methode: Sie ist relativ schwer zu schreiben und zu verstehen.

asynchrones Warten

Seit dem Aufkommen von ES6 Promise hat sich asynchroner Code allmählich von der Callback-Hölle zur eleganten funktionalen Pipeline-Verarbeitung gewandelt, aber für Entwickler, die damit nicht vertraut sind, ist es nur eine Abwechslung von der Callback-Hölle. Es ist einfach die Hölle.

Der neue async/await ist in ES8 standardisiert. Obwohl es sich nur um Syntaxzucker für die Kombination von Promise und Generator Function handelt, wird er über async</code weitergeleitet > /<code>await kann synchrone Syntax verwenden, um asynchrone Ereignisse zu verarbeiten, genau wie ein alter Baum, der neue Blumen blüht:

function wait(time, fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('wait:', time)
      resolve(fn ? fn() : time)
    }, time)
  })
}
await wait(500, () => console.log('bar'))
console.log('foo')
// wait: 500
// bar
// foo

Durch die Verwendung von setTimeout</ code> wird in ein Promise gepackt und dann mit dem Schlüsselwort <code>await aufgerufen. Sie können sehen, dass als Ergebnis zuerst bar und dann foo angezeigt wird wird angezeigt, d. h. das Schreiben asynchroner Ereignisse in die eingangs erwähnte synchrone Verarbeitung.

Schauen Sie sich ein weiteres Beispiel an:

async function withAsyncAwait() {
  for(let i = 0; i < 5; i++) {
    await wait(i*500, () => console.log(i))
  }
}await withAsyncAwait()
// wait: 0
// 0
// wait: 500
// 1
// wait: 1000
// 2
// wait: 1500
// 3
// wait: 2000
// 4

Die Funktion withAsyncAwait ist im Code implementiert und es werden die Schleife for und das Schlüsselwort await verwendet um die Funktion wait wiederholt auszuführen; wenn sie hier ausgeführt wird, wartet die Schleife nacheinander eine andere Anzahl von Sekunden, bevor sie die nächste Schleife ausführt. Wenn Sie async/await verwenden, denken Sie daran, es am besten zu verwenden, da das Schlüsselwort await nur in der asynchronen Funktion ausgeführt werden kann zur gleichen Zeit.

Außerdem müssen Sie bei der Verwendung von Schleifen zur Verarbeitung asynchroner Ereignisse beachten, dass viele nach ES6 bereitgestellte Array-Methoden die Syntax async/await nicht unterstützen forEach hier ersetzt for, das Ergebnis wird eine synchrone Ausführung und Zahlen werden alle 0,5 Sekunden ausgedruckt:

[Verwandte Empfehlungen:

Javascript-Lern-Tutorialasync/await，虽然只是 Promise 和 Generator Function组合在一起的语法糖，但通过 async/await 便可以将异步事件用同步语法来处理，就好像是老树开新花一样，写起来的风格与 Promise 完全不同：

rrreee

通过把 setTimeout 包装成 Promise，再用 await 关键字调用，可以看到结果会是同步执行的先出现 bar，再出现 foo，也就是开头提到的将异步事件写成同步处理。

再看一个例子：

rrreee

代码中实现了withAsyncAwait 函数，用 for 循环及 await 关键字反复执行 wait 函数；此处执行时，循环每次会按顺序等待不同的秒数再执行下一次循环。

在使用 async/await 时，由于 await 关键字只能在 async function 中执行，使用时务必要记得要同时使用。

另外在用循环处理异步事件时，需要注意在 ES6 之后提供的很多 Array 方法都不支持 async/await 语法，如果这里用 forEach 取代 for

]

Das obige ist der detaillierte Inhalt vonWas sind die beiden asynchronen Verarbeitungsmethoden in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!