In diesem Tutorial lernen Sie anhand von Beispielen die asynchronen / wartenden Schlüsselwörter von JavaScript kennen.
Sie verwenden das asyncSchlüsselwort mit einer Funktion, um darzustellen, dass die Funktion eine asynchrone Funktion ist. Die asynchrone Funktion gibt ein Versprechen zurück.
Die Syntax der asyncFunktion lautet:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Hier,
- name - Name der Funktion
- Parameter - Parameter, die an die Funktion übergeben werden
Beispiel: Asynchrone Funktion
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Ausgabe
Asynchrone Funktion.
Im obigen Programm wird das asyncSchlüsselwort vor der Funktion verwendet, um darzustellen, dass die Funktion asynchron ist.
Da diese Funktion ein Versprechen zurückgibt, können Sie die Verkettungsmethode then()wie folgt verwenden :
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Ausgabe
Asynchrone Funktion 1
Im obigen Programm wird die f()Funktion aufgelöst und die then()Methode ausgeführt.
JavaScript wartet auf Keyword
Das awaitSchlüsselwort wird in der asyncFunktion verwendet, um auf die asynchrone Operation zu warten.
Die zu wartende Syntax lautet:
let result = await promise;
Durch die Verwendung von wird awaitdie asynchrone Funktion angehalten, bis das Versprechen einen Ergebniswert (Auflösen oder Ablehnen) zurückgibt. Beispielsweise,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();
Ausgabe
Versprechen gelöst Hallo
Im obigen Programm wird ein PromiseObjekt erstellt und nach 4000 Millisekunden aufgelöst. Hier wird die asyncFunc()Funktion mit der asyncFunktion geschrieben.
Das awaitSchlüsselwort wartet darauf, dass das Versprechen vollständig ist (lösen oder ablehnen).
let result = await promise;
Daher wird Hallo erst angezeigt, nachdem der Versprechungswert für die Ergebnisvariable verfügbar ist.
Wenn das obige Programm awaitnicht verwendet wird, wird Hallo angezeigt, bevor das Versprechen aufgelöst wird.
Funktionieren der Async / Wait-Funktion
Hinweis : Sie können awaitnur innerhalb von asynchronen Funktionen verwenden.
Mit der asynchronen Funktion kann die asynchrone Methode scheinbar synchron ausgeführt werden. Obwohl die Operation asynchron ist, scheint es, dass die Operation synchron ausgeführt wird.
Dies kann nützlich sein, wenn das Programm mehrere Versprechen enthält. Beispielsweise,
let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )
Wartet im obigen Programm darauf, awaitdass jedes Versprechen vollständig ist.
Fehlerbehandlung
Während Sie die asyncFunktion verwenden, schreiben Sie den Code synchron. Sie können die catch()Methode auch verwenden , um den Fehler abzufangen. Beispielsweise,
asyncFunc().catch( // catch error and do something )
Die andere Möglichkeit, einen Fehler zu behandeln, ist die Verwendung von try/catchBlock. Beispielsweise,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved
Im obigen Programm haben wir try/catchBlock verwendet, um die Fehler zu behandeln. Wenn das Programm erfolgreich ausgeführt wird, wird es in den tryBlock verschoben. Und wenn das Programm einen Fehler auslöst, geht es zum catchBlock.
Um mehr über try/catchDetails zu erfahren , besuchen Sie JavaScript JavaScript try / catch.
Vorteile der Verwendung der asynchronen Funktion
- Der Code ist besser lesbar als ein Rückruf oder ein Versprechen.
- Die Fehlerbehandlung ist einfacher.
- Das Debuggen ist einfacher.
Hinweis : Diese beiden Schlüsselwörter async/awaitwurden in der neueren Version von JavaScript (ES8) eingeführt. Einige ältere Browser unterstützen möglicherweise nicht die Verwendung von async / await. Weitere Informationen finden Sie unter JavaScript async / warte auf Browserunterstützung.
