If you’ve worked with JavaScript for any length of time, you’ve probably run into promises. And if you’re like me, you probably shake your head and wonder why JavaScript has to let you down like that.

Promises are a pretty difficult thing to wrap your mind around. Andy Shora has a pretty great cartoon about promises that I’ve referenced a bunch of times trying to wrap my head around promises.

Basically you use promises when you need one thing to complete before the next function runs. If you’re thinking that this sounds very similar to callbacks, you’d be right. So why would we use a promise over a callback? Well there are a few reasons, but I think the most compelling reason is clarity. For example, a complex set of callback functions may look like this:

getData(function () {
  convertData(function () {
    convertDataAgain(function () {
      outputData(function () {

      })
    })  
  })
})

That’s pretty icky, right? Whereas the same code written as a promise might look like this:

getData
  .then(convertData)
  .then(convertDataAgain)
  .then(outputData)

Wow, what a difference! When you compare callbacks to promises, promises are much clearer about what is actually happening, and the order in which the functions are executed.

But how does one actually use a promise?

Let’s take a closer look. Sometimes you’re already working with something that will return a promise. Angular’s $https is a good example of this. In that case, your promise might look like this:

$https.get('someUrl').then(
  function success(data) {
    doSomeCoolStuff(data);
  },
  function error(err) {
    oops(err);
  });

Since $https already returns a promise, we don’t need to do anything special and we can just include our success and error functions and we’re good to go.

But what if we aren’t using anything that already returns a promise? Well that isn’t really a problem because we can create our own promises. Recent I built a Twitterbot which makes use of promises. The code looks like this:

var pickTheQuote = new Promise(function(resolve, reject) {
  getQuotes();
  if(quotesArr <= 0) {
    reject(pickTheQuote);
    return;
  } else {
    resolve(pickTheQuote);
  }
});

function chooseQuote() {
  // return random quote
}

function postToTwitter() {
  // post quote to twitter
}

pickTheQuote
  .then(chooseQuote)
  .then(postToTwitter)

The first thing I did up there was create a new promise. Then, based upon the contents of an array, I either reject or resolve the promise. In the event that my array is empty, I reject the promise and stop the function entirely. In the event that I have contents in my array, I resolve the promise.

Once the promise is resolved, I call the chooseQuote function and after that, I call the postToTwitter function. Obviously these functions need to execute in this specific order, otherwise, I might not have a quote to tweet.

And that’s the basics of promises. After you create a promise, based on certain criteria you can either resolve or reject your promise. Then you can execute functions after your promise has been fulfilled.

I hope that helps clear up promises for you!

Questions? Tweet me!

Many thanks to Devin Clark for helping proofread this post and writing some example code. Thank you, Devin!