Promises of Javascript

Onick Ahmed
3 min readMay 10, 2021

--

Definition

FreeCodeCamp did a great job explaining Promises in javascript:

A promise in JavaScript is similar to a promise in real life. When we make a promise in real life, it is a guarantee that we are going to do something in the future. Because promises can only be made for the future.

Promise Lifecycle

A promise has 2 possible outcomes: it will either be kept when the time comes, or it won’t.

This is also the same for promises in JavaScript. When we define a promise in JavaScript, it will be resolved when the time comes, or it will get rejected.

Syntax

The first argument represents the function that should be called to resolve the promise. The second one represents the function that will occur if the promise is rejected.

const myPromise = new Promise((resolve, reject) => {  
let condition;

if(condition is met) {
resolve('Promise is resolved successfully.');
} else {
reject('Promise is rejected');
}
});

If the condition is true, the resolve function will take place. On the other hand if the condition is not true, the reject method will take place.

States of promise

A Javascript Promise object can be in one of three states: pending, resolved, or rejected.

While the Promise object is not ready yet, the state will be pending. Once it resolves, it can either go to the resolved state (successful Promise) or the rejected state (unsuccessful Promise).

https://www.freecodecamp.org/news/content/images/2020/06/Ekran-Resmi-2020-06-06-12.21.27.png

Then?

If you revisit the picture at the beginning of this post, you’ll see that there are 2 cases: One for resolved promises and one for rejected. If the Promise gets resolved (success case), then something will happen next (depends on what we do with the successful Promise).

myPromise.then();

The then( ) method is called after the Promise is resolved. Then we can decide what to do with the resolved Promise.

For example, let’s log the message to the console that we got from the Promise:

myPromise.then(state => console.log(`The Promise was ${state}.`)
// This will print `The Promise was Successful.`

Catch?

However, the then( ) method is only for resolved Promises. What if the Promise fails? Then, we need to use the catch( ) method.

Likewise we attach the then( ) method. We can also directly attach the catch( ) method right after then( ):

// if myPromise is in the rejected state, the .then() method would be skipped over and go directly to the .catch() method.myPromise.then(state => {
console.log(`The Promise was ${state}.`
}).catch(state => {
console.log(`The Promise ended up in the catch because it was ${state}.`
})
// if myPromise is rejected, this will print `The Promise ended up in the catch because it was not successful.`

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.

So…

this is how we create a Promise in JavaScript and use it for resolved and rejected cases. Promises are a broader topic, and there are many more things to learn about them. So understanding how they work takes time.

This post is just an introduction to Promises, and I hope you found it helpful for getting an idea about what JavaScript Promises are and how to use them.

--

--