Eine einfache und eingehende Studie zu Async und Await in JavaScript

1. Einleitung

Die async-Funktion, auch bekannt als async/await, ist eine neue Funktion, die in ES2017 (ES8) eingeführt wurde. Ihr Hauptzweck besteht darin, die erforderliche Syntax bei der Verwendung von Promise-basierten APIs zu vereinfachen. async und await ermöglichen es uns, Promise-basierte asynchrone Verhaltensweisen auf prägnantere Weise zu schreiben, ohne Promise-Aufrufe absichtlich verketten zu müssen.

2. Detaillierte Erklärung

​ „async“ bedeutet, dass in der Funktion eine asynchrone Operation vorliegt, und „await“ bedeutet, dass der folgende Ausdruck auf das Ergebnis warten muss. Es ist zu beachten, dass das Schlüsselwort await nur innerhalb einer asynchronen Funktion gültig ist. Wenn es außerhalb des asynchronen Funktionskörpers verwendet wird, wird ein Syntaxfehler ausgelöst.

2.1, asynchron

Die asynchrone Funktion gibt ein Promise-Objekt zurück und Sie können die then-Methode verwenden, um eine Rückruffunktion hinzuzufügen. Solange async verwendet wird, wird es in ein Promise-Objekt gepackt, unabhängig davon, ob die Funktion ein Promise-Objekt zurückgibt oder nicht.

Schauen wir uns ohne weitere Umschweife den Code an, um die Wirkung zu sehen:

2.1.1. Funktion gibt Nicht-Promise-Objekt zurück

asynchrone Funktion testAsync() {
    gib "Hallo asynchron" zurück;
}

const Ergebnis = testAsync();
console.log(Ergebnis); 

Es ist ersichtlich, dass die Funktion, wenn sie eine Zeichenfolge direkt zurückgibt, ein Promise-Objekt zurückgibt, was der direkten Kapselung der Zeichenfolge in ein Promise-Objekt durch Promise.resolve () entspricht. Wenn die Funktion keinen Wert zurückgibt, ist das PromiseResult-Ergebnis undefiniert.

2.1.2. Funktion gibt Promise-Objekt zurück

	asynchrone Funktion testAsync() {
		returniere neues Promise(Funktion(auflösen, ablehnen) {
			wenn (wahr) {
				lösen('lösen returnieren')
			} anders {
				ablehnen('Rückgabe ablehnen')
			}
		})
	}
	console.log(testAsync()); 

Es ist ersichtlich, dass das zurückgegebene Objekt auch ein Promise-Objekt ist.

2.2, warte

Auf das Schlüsselwort „await“ kann jede beliebige Variable oder jeder beliebige Ausdruck folgen, normalerweise folgt auf „await“ jedoch ein asynchroner Prozess. Wenn „await“ verwendet wird, wird die Ausführung des nachfolgenden Codes blockiert. Lassen wir Async zunächst beiseite und sprechen nur über Await.

​ Da „await“ nur in mit „async“ gekennzeichneten Funktionen verwendet werden kann, führen Sie die folgenden Beispiele bitte in der Browserkonsole aus, um die Wirkung zu sehen.

Funktion testAsync() {
	returniere neues Promise(Funktion(auflösen, ablehnen) {
		setzeTimeout(Funktion() {
			wenn (wahr) {
				console.log('Anfordern...')
				lösen('lösen returnieren')
			} anders {
				ablehnen('Rückgabe ablehnen')
			}
		}, 2000)
	})
}
var Ergebnis = warte auf testAsync();
var result1 = warte auf „Ausführen nach testAsync“;
console.log(Ergebnis);
konsole.log(ergebnis1); 

Es ist ersichtlich, dass nach der Verwendung von await der nachfolgende Code erst ausgeführt wird, wenn die Methode testAsync ausgeführt wird. Sie können auch versuchen, Async vor TestAsync zu entfernen, um den Unterschied beim Hinzufügen von Await zu sehen.

2.3. Kombination aus async und await

​ Oben wissen wir, dass „await“ die nachfolgende Codeausführung blockiert. Wie können wir also dieses Problem lösen? Sie müssen async verwenden. Nach der Verwendung von async wird bei der Ausführung der Funktion, sobald await auftritt, zuerst ein Promise-Objekt zurückgegeben. Nachdem der Vorgang nach await abgeschlossen ist, werden die Anweisungen im async-Funktionskörper ausgeführt.

Zunächst zur Grammatik:

 asynchrone Funktion Funktionsname() {
 	warte auf XXX;
 }

​ Der obige Beispielcode:

Funktion testAsync() {
	returniere neues Promise(Funktion(auflösen, ablehnen) {
		setzeTimeout(Funktion() {
			wenn (wahr) {
				console.log('Anfordern...')
				lösen('lösen returnieren')
			} anders {
				ablehnen('Rückgabe ablehnen')
			}
		}, 2000)
	})
}

Funktion testAsync2() {
	returniere neues Promise(Funktion(auflösen, ablehnen) {
		setzeTimeout(Funktion() {
			wenn (wahr) {
				console.log('Anforderung 2...')
				auflösen('resolve return2')
			} anders {
				ablehnen('reject return2')
			}
		}, 2000)
	})
}

asynchroner Funktionstest () {
	console.log('Test gestartet...');
	var value1 = warte auf testAsync();
	konsole.log(Wert1);
	var Wert2 = warte auf testAsync2();
	konsole.log(Wert2);
	var value3 = warte auf „Testende …“;
	konsole.log(Wert3);
}

Konsole.log(Test()); 

Wie aus der obigen Abbildung ersichtlich, wird nach dem Auftreten des ersten Wartens sofort das Promise-Objekt zurückgegeben und anschließend die Funktion testAsync nacheinander ausgeführt. Nachdem die Funktion testAsync ausgeführt wurde, wird die Funktion testAsync2 ausgeführt. Es ist auch ersichtlich, dass asynchrone Funktionen die Syntax von Promise vereinfachen können. In der Vergangenheit mussten wir .then verwenden, um Rückrufe zu verarbeiten. Jetzt können wir await verwenden, um asynchronen Code zu schreiben, genau wie wir synchronen Code schreiben.

Lassen Sie uns es aktualisieren und basierend auf den oben genannten Funktionen zwei weitere allgemeine Funktionen hinzufügen:

Funktion fun1() {
	returniere 'Funktion 1'

}

Funktion fun2() {
	returniere 'Funktion 2'
}

Funktion fun3() {
	Konsole.log(fun1());
	console.log(test()); // asynchrone/Wartefunktion console.log(fun2());
}

 console.log(fun3()); 

Lassen Sie uns zunächst den Ausführungsprozess der Funktion klären.

1. Führen Sie zuerst Funktion 1 aus

2. Rufen Sie die Testfunktion auf und starten Sie die Ausgabe

3. Wenn in der Testfunktion ein Warten auftritt, geben Sie das Promise-Objekt sofort zurück

4. Funktion 2 ausführen

5. Führen Sie die Methode testAsync in der Testfunktion aus

6. Nachdem die testAsync-Methode in der Testfunktion ausgeführt wurde, führen Sie die testAsync2-Methode weiter aus

7. Ende der Testfunktion

Es ist ersichtlich, dass die asynchrone Funktion nach dem Auftreten von await sofort das Promise-Objekt zurückgibt und die nachfolgende Logik außerhalb der asynchronen Funktion weiter ausführt. Die asynchrone Funktion wird durch await blockiert und führt die Codelogik nacheinander aus.

2.4. asynchrone und wartende Ausnahmebehandlung

Die Funktion nach „await“ weist möglicherweise eine Ausnahme auf. Daher ist es am besten, den „await“-Befehl in einen „try…catch“-Codeblock einzufügen. Wenn es sich bei der Wartezeit um ein Promise-Objekt handelt, können Sie auch .catch verwenden, um es zu erfassen.

 // Die erste Möglichkeit, die asynchrone Funktion myFunction() { zu schreiben
   versuchen {
     warte auf etwas();
   } fangen (Fehler) {
     console.log(fehler);
   }
 }
 
 // Die zweite Möglichkeit, die asynchrone Funktion myFunction() { zu schreiben
   warte auf etwasVersprechen()
   .catch(Funktion (Fehler) {
     console.log(fehler);
   });
 }

3. Zusammenfassung

​ Nach dem Auftreten von await gibt die asynchrone Funktion sofort ein Promise-Objekt zurück und führt weiterhin die externe Logik der asynchronen Funktion aus. Die asynchrone Funktion wird durch await blockiert und führt die Codelogik nacheinander aus.

Sie können try...catch oder .catch verwenden, um Ausnahmen in asynchronen Funktionen zu behandeln.

Damit ist dieser Artikel mit einer ausführlichen und leicht verständlichen Untersuchung von async und await in JavaScript abgeschlossen. Weitere relevante Inhalte zu JavaScript async await finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!