Heim > Artikel > Web-Frontend > 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“
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
weitergeleitet > /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 // fooDurch 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 3402058288807f50677058ab1f5894f3 console.log(i)) } }await withAsyncAwait() // wait: 0 // 0 // wait: 500 // 1 // wait: 1000 // 2 // wait: 1500 // 3 // wait: 2000 // 4Die 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 完全不同:
通过把 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!