Promises In JavaScript

August 03, 2019

Promises in JavaScript are like the promises made in real life.

You make a promise, you either complete your promise or you fail to complete it.

They are used as an alternative to callbacks in javascript. A promise is a higher-order function that accepts another function in it as a parameter.

A promise in JavaScript can be declared as:

var promiseToGetGoodMarks = new Promise(function(resolve, reject){
    //some js code
});

A kid promises his parents to get good marks in exams.

He either gets good marks or he doesn’t.

When checked for the value of promiseToGetGoodMarks , we get the value:

When created, the promise has a “pending” state. The promise is yet to be completed or failed.

Promise Status

Resolving a Promise

Now, we modify the above code snippet as:

var promiseToGetGoodMarks = new Promise(function(resolve, reject){
 
 //student gives exams & gets his result
 
 var hasGotGoodMarks = true; //this will be calculated dynamically
 if(hasGotGoodMarks) {  
  resolve();
 }
 else{
  reject();
 }
});

The function inside the Promise has a boolean variable named hasGotGoodMarks which decides whether to resolve a promise or reject a promise.

If the Promised task is done => We resolve a promise

If the Promised task is not completed => We reject a promise

We marked the variable hasGotGoodMarks as true. Based on the boolean condition, we resolved the promise using the resolve method call.

Now, if we check the status of promise variable promiseToGetGoodMarks , we get the status:

Now the promise is resolved as the function gets executed & based on the boolean condition resolve()is called, which changed the status of the promise to resolved.

Notice the value PromiseValue is undefined.

What is this value? Let’s see.

Try replacing the resolve() statement with the following statement:

resolve("Completed the promise");

Not check for the value of promiseToGetGoodMarks, we get the value:

The then() method

After a promise is completed, we handle the next task to be executed in the then method chained to a promise.

We use the then() method like:

promiseToGetGoodMarks.then(function(resolvedData){
 console.log(resolvedData);
 console.log("Give Reward");
}

The then() method will be executed as soon as the promise is resolved & the parameter resolvedData is the PromiseValue that we passed in the resolve method above.

When executed the code, we get the output:

Completed the Promise
Give Reward

Rejecting a promise

Now, we modify the code snippet as:

var promiseToGetGoodMarks = new Promise(function(resolve, reject) {    //student gives exams & gets his result    var hasGotGoodMarks = false; 
    //this will be calculated dynamically
    
    if (hasGotGoodMarks) {
        resolve("Completed the Promise");
    } else {
        reject("Failed to complete promise");
    }
});

Now we get the promise status as:

We get the status as rejected as based on the boolean, the reject()method is called.

The PromiseValue is the data passed in the reject method.

The catch() method

As the then() method works in conjunction with the resolve() method. Similarly, the catch()method works in conjunction with the reject()method.

We append the catch method to the then method to catch the incompleted promise.

promiseToGetGoodMarks.then(function(resolvedData){
 console.log(resolvedData);
 console.log("Give Reward");
})
.catch(function(rejectedData){
 console.log(rejectedData);
 console.log("Failed!");
});

When executed with the reject() statement in action in the promise, we get the result: