Einführung in Promises in JavaScript

Sie wissen bereits, dass die Verwendung des Callback-Modells für Asynchronität leicht zu einer Situation namens Callback Hell führt. Daher wurde in JavaScript ein neues Modell mit dem Namen Promises (promise) eingeführt. Lassen Sie uns dieses Modell studieren.

Ein Promise ist ein Objekt, dem eine Funktion als Parameter übergeben wird, in der wir unseren asynchronen Code platzieren müssen:

let promise = new Promise(function() {
	// asynchroner Code
});

Wie Sie sehen, habe ich das Promise-Objekt in der Variable promise gespeichert. An einer anderen Stelle im Code kann ich auf diese Variable die Methode then anwenden und ihr eine Funktion übergeben, die den Code enthält, der ausgeführt werden soll, sobald der asynchrone Code, der bei der Erstellung dieses Promises geschrieben wurde, abgeschlossen ist:

promise.then(function() {
	// wird ausgeführt, wenn der asynchrone Code abgeschlossen ist
});

Das klingt verwirrend, schauen wir uns deshalb ein Beispiel an. Angenommen, ich habe folgenden asynchronen Code:

setTimeout(function() {
	let result = [1, 2, 3, 4, 5];
}, 3000);

Nehmen wir an, ich möchte für ihn unsere Hauptaufgabe der Asynchronität lösen: einen bestimmten Code ausführen, nachdem der Timer abgelaufen ist. Dabei möchte ich diesen Code nicht innerhalb des Timers platzieren und möchte, dass das Ergebnis, das ich in der Variable result geschrieben habe, irgendwie in diesen Code gelangt. Im Grunde haben wir diese Aufgabe in vorherigen Lektionen über Callbacks und Subscriptions gelöst. Sehen wir uns jetzt an, wie man das mit Promises macht.

Zuerst müssen wir unseren asynchronen Code in ein Promise einwickeln:

let promise = new Promise(function() {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

Das reicht jedoch nicht aus. Wir müssen explizit angeben, dass unser asynchroner Code abgeschlossen ist. Dabei hilft uns eine spezielle Abschlussfunktion, die automatisch als erster Parameter an die Funktion übergeben wird, falls dieser angegeben ist:

let promise = new Promise(function(resolve) { // Parameter angeben
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

Mit der Abschlussfunktion können wir dem Promise explizit mitteilen, dass der asynchrone Code beendet ist. Dazu müssen wir diese Funktion an der gewünschten Stelle aufrufen:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(); // Promise abschließen
	}, 3000);
});

Wenn wir ein Ergebnis des asynchronen Codes nach außen übermitteln möchten, können wir es als Parameter unserer Abschlussfunktion übergeben:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(result); // Ergebnis übergeben
	}, 3000);
});

Man kann natürlich auch auf die Zwischenvariable verzichten:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		resolve([1, 2, 3, 4, 5]);
	}, 3000);
});

Nun können wir an jeder anderen Stelle die Methode then unseres Promises aufrufen:

promise.then(function() {
	// wird ausgeführt, wenn das Promise abgeschlossen ist
});

Das Ergebnis des Promises wird an den ersten Parameter der Funktion übergeben, falls wir diesen angeben möchten:

promise.then(function(result) {
	console.log(result); // gibt das Array mit dem Ergebnis aus
});

Erstellen Sie ein Promise, in dem es eine Verzögerung von 5 Sekunden gibt, nach der das Promise abgeschlossen sein soll und einen beliebigen Text als Ergebnis zurückgibt. Geben Sie diesen Text auf dem Bildschirm aus.