Visualisierung von Promises

Durchbrechen…

Um zu veranschaulichen, wie Promises ausgeführt werden, definieren wir eine neue Methode delay(millisecs).

function delay(millisecs) {
  return new Promise(resolve => {
    setTimeout(() => resolve(millisecs), millisecs);
  });
}

Das ist eine Hilfsmethode, die aufgelöst wird, sobald der Timeout abgelaufen ist.

Die Verzögerung in Millisekunden wird an den Callback von .then übergeben.

Betrachten wir vier Beispiele (mit animierten Zeitlinien).

Beispiel #1/4

Hier wird gezeigt, wie die Ausführung von console.log() durch delay(msec) verzögert wird.

delay(1000).then(() => console.log("done"));

Beispiel #2/4

Das zeigt einen typischen Fehler.

Der console.log wird sofort ausgelöst, wenn delay(1000) beginnt. Nicht nach der Verzögerung, wie Sie es vermutlich erwartet haben.

Da console.log undefined zurückgibt, wird unser .then() stillschweigend ignoriert.

Beachten Sie den Unterschied zwischen typeof console.log === 'function' und typeof console.log() === undefined.

Im Allgemeinen wird die gewünschte Verwendung von console.log in Beispiel #1 gezeigt. Stellen Sie sicher, dass Sie Funktionen an .then und .catch übergeben.

delay(1000).then(console.log("done"));

Beispiel #3/4

3 Promises werden gleichzeitig ausgeführt.

delay(1000).then(console.log);
delay(2000).then(console.log);
delay(3000).then(console.log);

Beispiel #4/4

Promise.all mit 3 delay‑Promises. Sie laufen parallel.

Promise.all([delay(1000), delay(2000), delay(3000)]).then(console.log);

delay(1000) ---| [resolved]------------------v
delay(2000) ---|--------------| [resolved]---v
delay(3000) ---|--------------|--------------v [resolved]
Promise.all()  |--------------|-------------- > console.log([1000, 2000, 3000])
|--------------|--------------|--------------|--------------------------------
|              |              |              |
0msec        1sec           2sec           3sec

Credits:

• Animierte Async‑Diagramme von Patrick Biffle
• Inspiration für diesen Artikel: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html