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 promiseIf 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:
0 comments