ES6 Promises for Beginners

Sam Johnson
3 min readFeb 22, 2021
https://waawfoundation.org/waawblog/wp-content/uploads/2020/12/00l8p1iqqfNP3HRG3TtTgXl-1.1587974089.fit_lim.fit_lim.size_956x.jpg

Personally, when I think about the idea of promises, I go back to my middle school days when kids were running around on the playground making promises left and right. We would tell each other secrets and make the other promise not to tell anyone else, but those days were filled with many more broken promises than kept promises. When we take a look at our topic today, ES6 Promises, setting these into our code feels quite similar to those playground days. However, we are able to definitively find out whether or not a promise has been kept or if it has been broken.

Creating Promises

When writing a new function that has an actionable result that comes out of it, we might want to use Promises to resolve those results for us. We can create Promises through constructors and all we need to pass in is an action for the promise to run on a successful execution of the code and an action for a failed execution of the code. I hear you saying, “Ah well, can’t I just accomplish the same things with conditional statements?” And to that I would say “Nearly.”

Usefulness of Promises

While first looking at this concept, one might be tempted to think that this is just an overly complicated way of writing out if-else if statements. That’s pretty valid until you start to understand asynchronous functions and what role these Promises play in their functionality. Asynchronous functions in a quick and basic explanation allow multiple functions or actions to be performed at once quite easily. The important bit here is that any and every asynchronous function will return a Promise value.

Methods of Promises

.catch()

The catch method is essential for creating promises, when invoked it will check to see if the promise was fulfilled or broken. When fulfilled, it will just resolve to the original success state of the function. However, when it finds the promise to be broken the catch method will add in a new rejection statement for the function to run.

.then()

The then method is going to be your most used method when it comes to creating and implementing Promises. This method is what will allow you to call a new Promise based on the result of your previous Promise. Using this method we can chain together as many Promises as we need and hold the result in one easily accessible place.

.finally()

The finally method is not always necessary, but it can be a good way to close out your code. Essentially once everything has resolved from your Promise, whether it’s the Promise was fulfilled or rejected, it will take that result and return a new Promise with that value passed in.

Putting it all together

Here we have a very basic example that chains together our methods from above, in this example we are just using the resulting values from each function call to call the next line. However, if any of our function calls produce an error, we have a way to deal with that with our catch method. Last of all we have a finally method that will conclude our code in a nice and simple way.

Conclusion

So while this is a very basic overview of a quite complex topic, I hope this helped you start to understand the role Promises play in more advanced code and how it starts to get created.

Sources

MDN Promise:

MDN Using Promises:

MDN Async Function:

--

--