Mastering JavaScript’s Promises

JavaScript’s promises can be quite confusing. I myself struggled with them a lot when I was learning this language — and it took me a long time to finally understand them. 😅

In reality, promises are an easy concept! They’re not as complex as they might seem at first.

In this article you’ll learn what promises are and how you can use them!

So, what are promises? 🤔

A promise object represents the eventual completion or failure of an asynchronous operation.

Simply speaking: a promise is data returned by asynchronous functions.

They are used to handle asynchronous operations in JavaScript easier and can prevent so-called “callback hell”.

In the course of its lifetime, a promise can have one of these three states:

• Pending: this is a promise’s initial state
• Fulfilled: the operation was completed successfully
• Rejected: the operation failed (e.g. an error occurred)

After creating a new promise, its state will always be pending. Then you’re able to control the state yourself! By calling resolve you can fulfill the promise. You could also reject it by using — you guessed it — reject .

Resolve and reject — what does that mean?

As you might have noticed in the code snippet above, the promise constructor takes one single argument. It’s a callback with two parameters, resolve and reject .
Both these parameters are functions you can call and pass values to! Let’s take a look at when to call them!

• Call resolve when everything went fine and the operation was completed successfully
• Use reject when something didn’t work (e.g. an error occurred) and the promise can’t be fulfilled because of that

General structure of a promise

Remember I said it’s possible to pass values to resolve and reject? While you can’t pass another promise object, you’re able to pass any other value to these functions!
But what happens with those values after passing them? That’s where notorious then and catch come into place.

Quick side note: Don’t forget that execution of the promise still continues after resolve and reject.

You most likely don’t want this type of behaviour. But don’t worry, a simple return statement will do the trick and stop all execution after resolving or rejecting your promise.

Executing promises

One way to run promises is to use then and catch. Both functions take a callback as an argument.

Another way, which is a lot more readable, is to make use of async and await.
Keep in mind that this method only works inside async functions!

Here’s a fun example!

Let’s imagine you promise to wash the dishes! If they’re clean afterwards, you’ll receive good praise. Should they still be dirty although you promised to wash them… well, they’d still be dirty then!

Feel free to copy this snippet and experiment a little with it! Also, try to create a similar promise by yourself! 🧠

Real-world example

Enough of all these theoretical examples, let’s see a real-world example! 🌍
Chances are, you’ve already worked with the Fetch API. It uses promises, too.

The fetch function returns a promise object, on which we can call then and catch.

Wrap-up

• A promise is data returned by asynchronous functions
• When creating a promise yourself: call resolve if the operation was completed successfully and reject in case it failed
• It’s possible to pass any value (except other promise objects) to resolve and reject
• You can execute promises using either then and catch or async and await

I hope this helped you understand JavaScript’s promises at least a bit better!
Of course, if you have any questions, don’t hesitate to write a comment! 👍

If you have Instagram, don’t miss my content on there! 🔥