Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is Promise Chaining in JavaScript?
In this tutorial, we will talk about promise chaining in JavaScript. Before moving to promise to chain let’s first talk about what is Promise
So, as we know JavaScript is single-threaded which means that no two functions will be allowed to run at the same time as we have only one call stack like below which has a function to execute
when one function completes its execution then another function starts executing so to achieve two or more functions running at the same time we use asynchronous programming in JavaScript example- setTimeout function which takes a call-back function and specified time after which it will execute that function.
setTimeout(function cT(){
console.log("I am here after 5 seconds")
}, 5000);
So, we use promise for the asynchronous operation which gives the result of asynchronous operation with its completion or failure.
Like in real life we make a promise about the completion of any work in the same manner it does it makes a promise, and it exists in one of its three states.
- Pending − This represents the initial state which says it is neither fulfilled nor rejected.
- Fulfilled − This says that the operation we assigned has been completed successfully.
- Rejected − This state says that the operation cannot get executed it got rejected.
The asynchronous method returns a value and it does not return the final value instead it returns a promise to provide value to the function in the future.
We execute Promise using the then() method after the promise statement and if it got rejected due to some error then using catch block will be handled.
How to declare a promise in JavaScript?
let promise = new Promise(function (resolve, reject) {
return resolve("Hello I am resolved");
});
Here promise has a function inside it which is called a callback function and it has an argument as two methods resolve() and reject() as we already know about it from the above explanation about both.
So here resolve ensures successful completion of the function we have given and reject will ensure its responsibility for unsuccessful completion of the given executable callback function.
Example 1
Let’s see the program to find unique characters of a string using Set.
<!DOCTYPE html> <html> <head> <title>Promise chaining in JavaScript</title> </head> <body> <h3> Execute a Promise we receive</h3> <p id ="result"></p> <script> let promise = new Promise(function (resolve, reject) { return resolve("Hello I am resolved"); }); promise.then(function(value) { console.log(value); document.getElementById("result").innerHTML += value; }) </script> </body> </html>
In the above inside. then() method a call back function is passed and the value variable is responsible for printing out the result coming from resolve() method.
What is Promise Chaining?
Promise chaining is basically several asynchronous function calls and executing them in a synchronized manner one after another using. then() method.
Example 2
Let’s understand in detail using an example.
<!DOCTYPE html> <html> <head> <title>Promise chaining in JavaScript </title> </head> <body> <h3> Promise Chaining</h3> <p id ="result"></p> <script> let promise = new Promise(function (resolve, reject) { return resolve(10); }); promise.then(function(firstPromise_val) { alert(firstPromise_val) document.getElementById("result").innerHTML += "First Promise val: "+firstPromise_val+"<br>"; return firstPromise_val+10; }). then(function(secondPromise_val){ alert(secondPromise_val) document.getElementById("result").innerHTML +="Second Promise val: "+ secondPromise_val+"<br>"; return secondPromise_val+10; }). then(function(thirdpromise_val){ alert(thirdpromise_val) document.getElementById("result").innerHTML +="Third Promise val: "+thirdpromise_val+"<br>"; return thirdpromise_val+10; }) </script> </body> </html>
Let’s understand how promise chaining works.
- First initial promise got resolve.
- Then .then() method called it created a new promise and it got resolve.
- Again .then() method called and it created a new promise and then it also got resolve.
- Like wise it’s working we can add another promise handler also.
So, basically .then() method returns a new promise and it calls next using .then() and so on.
Example 3
<!DOCTYPE html> <html> <head> <title>Promise chaining in javascript</title> </head> <body> <h3> Promise Chaining</h3> <p id ="result"></p> <script> let promise = new Promise(function (resolve, reject) { return resolve("My"); }). then(function(firstPromise_val) { alert(firstPromise_val) return firstPromise_val+" Name"; }). then(function(secondPromise_val){ alert(secondPromise_val) return secondPromise_val+" is"; }). then(function(thirdpromise_val){ alert(thirdpromise_val) return thirdpromise_val+" Kalyan"; }). then(function(thirdpromise_val){ alert(thirdpromise_val) document.getElementById("result").innerHTML = thirdpromise_val }) </script> </body> </html>
So, we saw in-depth concepts from base to promise chaining about its working.
903 Views
