Visualisierung von Promises

Break on through...

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

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

Dies ist eine Hilfsmethode, die sich auflöst, sobald die Wartezeit abgelaufen ist.

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

Schauen wir uns 4 Beispiele an (mit animierten Zeitachsen).

Beispiel #1/4

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

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

Zeitachse, die delay 1000 und dann console.log nach einer Sekunde zeigt

Beispiel #2/4

Dies zeigt einen häufigen Fehler.

Das console.log wird sofort ausgelöst, wenn delay(1000) beginnt. Nicht nach der Verzögerung, wie du es wahrscheinlich wolltest.

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

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

Im Allgemeinen ist die gewünschte Verwendung von console.log wie in Beispiel #1 gezeigt. Stelle sicher, dass du Funktionen in .then und .catch übergibst.

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

Zeitachse, die console.log zeigt, das sofort ausgeführt wird, bevor die Verzögerung endet

Beispiel #3/4

3 Promises werden gleichzeitig ausgeführt.

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

Zeitachse, die drei Delay-Promises zeigt, die nach einer, zwei und drei Sekunden aufgelöst werden

Beispiel #4/4

Promise.all mit 3 delay-Promises. Sie werden gleichzeitig ausgeführt.

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

Zeitachse, die Promise.all zeigt, das auf alle drei Delay-Promises wartet

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