Breaking Down ES6: Promises

This week I decided to let y’all decide which topic I would cover in this installment of my Breaking Down ES6 series. I gave the option of ES6’s introduction of promises or default parameters. As you can see by the title, promises won!

Now, I’ve used promises before and have a superficial understanding of how they work, but I don’t know all the nitty gritty details. Throughout this blog post, I will be learning as I research and write. It’ll be a blast, so let’s get started.

What are Promises?

While looking for a concrete definition of what a promise is, I discovered that everyone uses different wording but it all has the same underlying meaning. My favorite definition that I found happened to be from MDN web docs.

The Promise is an object representing the eventual completion or failure of an asynchronous operation.

Their definition is short and sweet yet conveys the exact message of what a promise is. A promise is an object that acts as a placeholder for the future results of an asynchronous action. A great real world example of this comes from an article I found while researching. I absolutely love the example so I’m going to share it with you here.

For example, you book a flight ticket to go to India for traveling to the beautiful hill station Darjeeling. After booking, you get a ticket. That ticket is a promise by the airline that you will get a seat on the day of your departure. In essence, the ticket is a placeholder for a future value, names, the seat.

Now that we’ve covered what a promise is, I’m going to fill you in on useful terminology that comes with using a promise.

Useful Terminology

There are 3 different possible states that a promise can be: fulfilled, rejected, and pending. Let’s discuss what each of these means.

Fulfilled - The related action has succeeded, meaning that the promise has been completed successfully.

Rejected - The related action has failed, meaning that the promise could not be completed successfully.

Pending - The related action has yet to be fulfilled or rejected, meaning that the promise is still waiting to be completed.

Just to clarify, when I say ‘related action’ I mean the action that is related to the promise. So, all in all, these terms are pretty self-explanatory.

Creating Promises

A promise is created by using the Promise constructor, which makes use of a familiar keyword, new. This constructor takes in a function as an argument, better known as the “executer function”, which accepts 2 functions as parameters, resolve and reject.

resolve is called when the asynchronous action is completed successfully and returns the results.

reject is called when the asynchronous action fails and returns an error object.

Using Promises

Now on to using promises! In order for us, as developers, to access the value returned by either resolve or reject, we need to use the Promise .then() method. In the simplest of terms, the .then() method returns the Promise. .then() takes two arguments, which are both handler functions that are responsible for either the success or the failure of the Promise.

The first argument of .then() runs when the promise is fulfilled and it receives the result.

The second argument of .then() is a function that runs when the promise was rejected and it receives the error.

Once a function is fulfilled or rejected, the respective handler function will be called asynchronously. At this point, there is one important characteristic of a promise that I want to point out:

A promise can only succeed or fail one time. Meaning that the promise does not have the ability to switch from success to failure or the other away around.

Chaining

One great thing about the then() method is that it allows for method chaining. This means that you have the ability to take the result returned by the first .then() method and use it in the following .then() method.

Error Handling - Catching Promises

Earlier we discussed how .then() takes two arguments, one for success and the other for failure. Well, there is also another way to code for errors and this is with .catch(). According to many articles that I found, .catch() does nothing special, it just makes the code more readable. .catch() is syntax sugar for then(undefined, func).

This is the same as

As with .then(), .catch() can also be chained as it returns a Promise.

Final Thoughts

Wow, I sure learned a lot about promises writing this post for y’all. Honestly, this is probably the most I’ve struggled while writing a blog post. This is exactly why I love writing technical articles, because it helps me gain a deeper understanding of the topic I’m writing about.

Please remember that I am a junior dev who is still learning, so if I have happened to get something wrong on here please let me know in the comments below so that I can address it. I don’t want to have incorrect information on here as much as you don’t want to read it. Let’s help make each other better!

Anyways, I sure hope that I helped even just one person understand JavaScript promises, or maybe taught someone something new they did not know.

Side Note - I have decided to start including photos that I’ve taken on my travels as the cover images of my blog posts. This picture of Volcán de Fuego at sunrise was taken from the peak of Volcán Acatenango in Guatemala.

Sources

A Simple Guid to ES6 Promises
JavaScript Promises: an Introduction
Promise
Promise
Promise.prototype.then()