Visualizing Promises

Break on through...

In order to visualize how Promises execute, let’s define a new method delay(millisecs).

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

This is a utility method which will resolve once the timeout has passed.

The delay in milliseconds will be passed to .then’s callback.

Let’s look at 4 examples (with animated timelines).

Example #1/4

This shows how console.log()’s execution will be delayed by delay(msec).

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

Example #2/4

This shows a common mistake.

The console.log fires right when the delay(1000) begins. Not after the delay like you probably wanted.

Because console.log returns undefined our .then() is silently ignored.

Note the difference between typeof console.log === 'function' vs. typeof console.log() === undefined.

Generally the desired usage for console.log is shown in Example #1. Make sure you pass functions into .then and .catch.

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

Example #3/4

3 Promises execute simultaneously.

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

Example #4/4

Promise.all with 3 delay Promises. They will execute simultaneously.

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

Credits:

• Animated async diagrams by Patrick Biffle
• Inspiration for this article: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html