Promises in JavaScript
📄 Table of Contents
- What are Promises
- Why to use Promises
- What are callbacks
- example of callback (setTimeout)
- how to create a Promise (syntax)
- promise.all, promise.allSettled, promise.race
▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Brief Introduction to Promises
Promises in JavaScript are very similar to the promises you make in your daily life, a kind of assurance that something will be done in the future.
According to MDN Docs, A Promise is an object representing the eventual completion or failure of an “Asynchronous” operation.
Promises allow you to attach callback handlers to handle the future asynchronous success value or failure reason.
Before diving deep into promises let’s understand what exactly is a callback.
◉ What is a Callback?
A callback is a function that is passed into another function as an argument to be executed later.
They’re so common in JavaScript that you probably used callbacks yourself without knowing they’re called callbacks. Here, is an example of setTimeout()
function callback:

In the example above, setTimeout()
waits for three seconds and is called after something happened (after 3 seconds passed for this example), but not before.
Callback Hell
Now let’s imagine a scenario where you want to wait another 3 seconds after the first callback has finished, and do something. Your code will look like the following:

And now if you want to do something after the second callback has finished, you will get another nested callback:

Nested callbacks make it difficult to maintain and scale the code. In the code above, we have three levels of nested functions, one for each setTimeout()
call. Having an application with tens of nested callbacks will make the developers live hell to update or even understand the code. Such a situation is referred to as callback hell.
That’s where the JavaScript promises come into the picture.
◉ JavaScript Promises
Promises are NOT meant to replace the callbacks. Instead, they simplify the chaining of functions, making it easier to read and maintain the code. A promise can be in one of the following states:

Different states of a promise:-
- Pending: before the event happens;
- Settled/Resolved: after the event happens;
- Fulfilled: when the promise returns the correct result;
- Rejected: when the promise does not return the correct result.
A pending promise can either be resolved (fulfilled) with a value or rejected with a reason. Once settled, a promise can not be resettled.
◉ Creating a Promise
To create a promise in JavaScript, you use the Promise
constructor:
const myPromise = new Promise();
It takes two parameters, one for success (resolve) and one for fail (reject):
const myPromise = new Promise((resolve, reject) => {
// condition
});
Inside the Promise, you manually call the resolve()
function if the promise is completed successfully and invoke the reject()
function in case an error occurs.
let completed = true;
const myPromise = new Promise((resolve, reject) => {
if(completed) {
resolve('Promise is resolved successfully.');
} else {
reject('Promise is rejected');
}
});
After executing the above promise in the browser console you will see that the promise is resolved because the completed
variable is set to true

To see the pending
state of the promise, we wrap the code of the Promise in the setTimeout()
function:
let completed = true;
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
if(completed) {
resolve('Promise is resolved successfully.');
} else {
reject('Promise is rejected');
}
}, 3000)
});
Now, you see that the promise starts with the pending
state with the value is undefined
. The promise value will be returned later once the promise is completed.

After about 3 seconds, type myPromise
in the console window, you will see that the state of the promise becomes resolved
and the promise value is the string that we passed to the resolve()
function.

If you change the value of the completed
variable to false
and run the promise again you will see an error message and the state of the promise becomes rejected
after 3 seconds:

Consuming a Promise: then, catch, finally
1) The .then()
method
The then()
method is used to schedule a callback to be executed when the promise is successfully resolved.
For example, let’s log the message to the console that we got from the Promise:

2) The catch()
method
If you want to schedule a callback to be executed when the promise is rejected, you can use the catch()
method of the Promise
object:

So if the promise gets rejected, it will jump to the catch()
method and this time we will see a different message on the console.
3) The finally()
method
Sometimes, you want to execute any piece of code whether the promise is fulfilled or rejected.

The finally()
method is called once the promise is settled
irrespective of whether it is resolved or rejected.
◉ promise.race, any, all, allSettled
The native Promise
object has some extra stuff you might be interested in:

Promise.any
The Promise.any
method takes an array of Promises and will return as soon as the first one is Fulfilled.
Promise.race()
Promise.race()
method accepts a list of promises and returns a promise that fulfills or rejects as soon as there is one promise that fulfills or rejects, with the value or reason from that promise.

This is very similar to the
Promise.any
method, however, it has one key difference. WhilePromise.any
will return only if one of the promises is Fulfilled,Promise.race
will return if any of the promises are Settled.
Promise.all()
Promise.all()
method is useful to execute multiple promises in parallel and waits until all of them are ready. It takes an array of promises as an input and returns a single promise, that resolves when all of the promises get resolved or any one of them gets rejected.

Promise.allSettled()
Promise.allSettled()
method wait’s until all promises have settled (each may resolve or reject). Returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describe the outcome of each promise.

Summary
- A promise is an object that returns a value in the future.
- A promise starts in the pending state and ends in either a fulfilled state or a rejected state.
- Use
then()
method to schedule a callback to be executed when the promise is fulfilled, andcatch()
method to schedule a callback to be invoked when the promise is rejected. - Place the code that you want to execute in the
finally()
method whether the promise is fulfilled or rejected.