Back to blog
Aug 2022·2 min read

Promises

#javascript

Ein Konzept, das für viele Entwickler zunächst schwer zu verstehen ist: Promises.

Promises wurden eingeführt, um die Verarbeitung asynchroner Operationen in Javascript zu erleichtern. Sie lösen das Problem, dass Callbacks oft tief verschachtelt werden und schwer zu lesen und zu warten sind. Promises bieten eine sauberere und einfachere Möglichkeit, asynchrone Operationen durchzuführen und zu verwalten.

Aber wie funktionieren Promises genau? Ein Promise ist im Grunde genommen ein Objekt, das eine Operation asynchron ausführt und entweder einen Wert zurückgibt oder einen Fehler wirft. Ein Promise kann sich in einem der drei Zustände befinden:

  1. Pending: Der initiale Zustand, in dem sich das Promise befindet, wenn es erstellt wurde.
  1. Fulfilled: Der Zustand, in dem das Promise erfolgreich abgeschlossen wurde und einen Wert zurückgegeben hat.
  1. Rejected: Der Zustand, in dem das Promise einen Fehler geworfen hat.

Lass uns das an einem Beispiel erklären:

const myPromise = new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() >= 0.5) { resolve("Success!"); } else { reject("Error!"); } }, 1000); });

myPromise .then((result) => { console.log(result); }) .catch((error) => { console.log(error); });

In diesem Beispiel erstellen wir ein Promise, das nach einer Sekunde entweder "Success!" oder "Error!" zurückgibt, je nachdem, ob eine zufällige Zahl größer oder kleiner als 0,5 ist. Wir rufen dann das Promise mit der "then"-Methode auf, um den Erfolg zu verarbeiten, oder mit der "catch"-Methode, um den Fehler zu verarbeiten.

Promises können auch verkettet werden, um komplexe asynchrone Operationen auszuführen. Das folgende Beispiel zeigt, wie man Promises verkettet, um eine asynchrone Aufgabe in mehreren Schritten auszuführen:

function stepOne() { return new Promise((resolve) => { setTimeout(() => { console.log("Step One Complete"); resolve(); }, 1000); }); }

function stepTwo() { return new Promise((resolve) => { setTimeout(() => { console.log("Step Two Complete"); resolve(); }, 1000); }); }

function stepThree() { return new Promise((resolve) => { setTimeout(() => { console.log("Step Three Complete"); resolve(); }, 1000); }); }

stepOne() .then(() => stepTwo()) .then(() => stepThree()) .then(() => console.log("All Steps Complete"));

In diesem Beispiel haben wir drei Funktionen definiert, die jeweils eine asynchrone Operation ausführen und ein Promise zurückgeben, wenn sie abgeschlossen sind. Wir rufen dann diese Funktionen nacheinander auf, indem wir sie mit der "then"-Methode verketten, um sicherzustellen, dass jeder Schritt erst ausgeführt wird, wenn der vorherige Schritt abgeschlossen ist.

NewerAutosort: Schnell und einfach Bilder und Videos sortierenOlderJavaScript - Generatoren