DJ Quilter

Front-End Developer

Writing My First Promise

What is a Promise? Up until a few weeks ago, I’d known that a Promise was something that let you chain together a series of requests (always AJAX in my mind), so that you could run them one after another as they completed. But really, I couldn’t have told you any more than that.

I started writing a small app recently that required a number of AJAX requests to be made one after another, and so began to make use of Promises. Being that it’s only a small personal project, I didn’t use any of the Promise libraries that help make things cross-browser. Everything was vanilla Javascript. This is what I learnt.

References

The first thing that I learnt was that my normal ‘go to’ resource (MDN) wasn’t particularly helpful. Thankfully it didn’t take long to find the following two articles:

Both of these dive into the detail that I’m going to avoid in this post. So go ahead and read them both at your leisure. I found three takeaways which helped me write my first Promise.

Writing a Promise

I think of a Promise as a function with a difference, and not just in the way that it is written. It is special, in the sense that it is going to return you a ‘resolution’ or a ‘rejection’ depending on the outcome of whatever’s going on inside of it.

var promise = new Promise(function(resolve, reject) {
  // Do something
  if( // something succeeds) {
    resolve(‘Woot!’);
  } else if ( // something fails) {
    reject(‘Wa-wa-waaaa...’)
  }
});

Pretty simple, but this is really only the first part of a Promise. What you do with a Promise afterwards is more easily explained alongside chaining.

Chaining

Following on from the above example, running a Promise looks like this:

promise
.then(function(success) {
  // Do something on success
  console.log(success); // logs ‘Woot!’
});

The then method deals with your successes very simply, but the most powerful feature of Promises is the ability to chain the then method.

The crucial bit of the puzzle here is that if the value which you pass to subsequent thens is a Promise, the subsequent then will wait for the success or failure of the earlier Promise before doing anything.

So you might end up with something a bit like this:

promise
.then(function(firstSuccess) {
  return anotherPromise(firstSuccess);
.then(function(secondSuccess) {
  // Do another thing with the second success
});

The two Promises will be handled one after the other, with the inputs of the second reliant on the outcomes of the first.

The benefits to code organisation and readability here should be obvious, but further than that this is the sort of functionality that is vital for developing Javascript applications.

Error Handling

Sometimes things don’t work, and when that happens we need to be able to log it. The catch method is very similar to the then method, but it is where our code goes when our Promises get rejected.

And it’s just as easy to use as the then method:

promise
.then(function(success) {
  // Do something on success
  console.log(success); // logs ‘Woot!’
}).catch(function(error) {
  // Do something with an error
  console.log(error); // logs ‘Wa-wa-waaaa...’
});

Conclusion

I should probably note that this code doesn’t work in IE (up to IE11 at time of writing), so it’s probably not for production. But there are a lot of libraries out there that fill the IE shaped gaps.

That was a crash-course in writing a Promise. If you want to get more detail, check out the two articles I mentioned at the start. They’re quite simply the best resources I found in my research.