Promises – Part 2 – Promise definition

Hopefully part 1 made it clear why promises can be useful in an asynchronous language like JavaScript. I think it’d now be best to talk a bit more about what a promise is and how exactly it works.

A promise is an object that defers a future state in the same way a callback can be used and is a cleaner alternative. To clarify what I mean by cleaner, there is a concept in programming known as “Callback Hell” which describes when functions become nested and difficult to read through the use of callbacks, here’s an example:

You probably get the idea that with more complex functions, this can get messy fast! (Check out callbackhell.com for a more thorough explanation)

Returning to what a promise is, a promise is a placeholder object that represents the result of an asynchronous operation. It holds the current status of the operation and can notify us when the operation either succeeds or fails. A promise can exist in three different states:

Pending – the promise’s outcome hasn’t yet been determined, because the asynchronous operation that will produce its result hasn’t completed yet.

Fulfilled – the asynchronous operation has completed, and the promise has a value.

Rejected – the asynchronous operation failed, and the promise will never be fulfilled. In the rejected state, a promise has a reason that indicates why the operation failed.

The .then() method returns another promise which means it is possible to chain this method resulting in a chain of promises without having to nest the functions and avoiding the problems we would face with a series of callbacks.

Promises can be created using new Promise which then takes a function. This function takes two parameters: resolve and reject. These are methods that signify the promise is fulfilled. Any errors should be passed to reject(). Data that has been successfully retrieved should be passed to resolve(), if you need to use it. Otherwise, you can call resolve() with nothing passed in if this does not matter. Here is an example using the ES6 version of promises for how this would look:

Promises are being introduced as first-class language features in ES6 and alternatively there are different JavaScript libraries which can handle promises such as Q, RSVP, when or even jQuery. I’ll begin looking at these libraries in the next post.

Thanks for reading! If you’ve got any comments, I’d love to hear from you.