Javascript “Promises” and “Promise Chains” explained in plain english

I’ve been very excited about Promises ever since they were introduced a year ago. While there are a lot of posts and opinions floating around, Promises will not make your code more performant… they will make it easier to read and understand (which in my book, often counts for a lot more!)

For the first part of this post, I’ll explain the basic structure of promises. If you have that covered, feel free to scroll to the latter half of the post.

Promises explained in plain english

Here’s the basic structure of a Promise in Javascript:

Pretty typical (and elusive) snippet of code there. I’m going to try and break down what’s going on.

For starters, focus only on lines 1–15:

  • There is the instantiation. This line basically creates a promise. A promise in JS needs something to do, a task. So the function you see being passed in here — function (resolve,reject) {…} is that task
  • Next you see the body of the task. You can do things here. Somewhere in this block of code, you need to decide if things went well or not. For example, if you were using this space to fetch an image, you either received it (went well)… or you didn’t (not so well).
  • If things went well, you will call some function that will mark this promise as “resolved”. If things didn’t go according to plan, you’ll “reject” this promise. (we’ll talk about this in more detail in just a second)

Now let’s focus on the remaining part of the code snippet, lines 17–27:

  • So far, in lines 1–15, you’ve only defined your Promise object
  • On lines 17 & 22, you basically attach a handlers to it
  • promise.XXXX (where XXX could be “.then” or “.catch” etc.) basically run the function defined in the promise (lines 1–15). Based on how things went (resolved or rejected) they will call the functions in “.then” and “.catch” respectively. So if your promise was resolved (…things went well), the function inside .then(…) will be executed, else the function in .catch(…) is executed.

NOTE:

  • “.then(function)” returns a Promise. Also, you may only call “.then(…)” or “.catch(…)” on Promise objects.

Now that we’ve covered the basics, let’s look at a more interesting example of what we can do with Promises.

Chaining Promises to perform multiple requests

Problem: Recently, I came across a situation where in I needed to fetch a bunch of URLs one after the other. However, the response for each URL had to be handled differently based on the URL.

For the sake of this post, let’s assume that the urls being fetched are:

  • google.com
  • apple.com
  • amazon.com

Here’s a simplified version of the script I used to handle this:

Let’s break this down:

  • Lines 1–11: Create a simple wrapper around the AJAX Get method provided by jQuery. This will simply pass the response to the callback specified.
  • Lines 18–51: I then create three functions (yes! Functions!) that return a JS Promise
  • Each promise internally does this — uses the Ajax wrapper to fetch its url, and once the data/response is received, it does something with the data and finally calls “resolve()”
  • In Line 54: I chain these promises one after the other. Note, that each of these functions returns a promise (and is not a Promise in itself). That’s why I use “first()”.then(…) as opposed to “first.then(…)”

To clarify further, here’s a way to look at the promise chain.

The promise chain — color coded with square brackets

In this manner, you can sequentially get each URL, handle it as desired and fire the “resolved()” function to trigger the next Promise in the chain :-)

Note: if you try to run the code snippet above in the browser, you’ll need to enable CORS. Here’s a chrome extension that can help do this with a simple click.

Hope you enjoyed this post.