JavaScript Promise Chaining

In this article, we will discuss how to perform Promise Chaining in JavaScript. A Promise is basically an object which represents the completion (or failure) of an asynchronous operation along with its result. 

A promise has 3 types of states and based upon these states, the promise executes the results.

• Pending: This state represents either an initial state or fulfilled state or rejected state.
• Fulfilled: This state represents that the asynchronous operation is successfully completed.
• Rejected: This state represents that the asynchronous operation is rejected.

A Promise is executed by using the .then() method written after the declared promise. If we need to handle any error which is occurred then we use the .catch() method written after promise. We also use the .finally() method if we want to just print our result irrespective of any error that occurred during promise execution.

Declaring a Promise: We can declare the promise by using the following syntax.

Javascript

let promise =  new Promise((resolve , reject)=>{
                resolve('Hello JavaScript !');
});

As you can see in the above syntax, there is a callback function that is passed inside a promise object which takes two methods as an argument. First, one is resolve() which is responsible for the successful completion of whatever text or anything executable is passed inside it. 

The second one is reject() which is responsible for the unsuccessful completion of an operation, and we can pass on text inside it, which gets displayed along with our error.

Executing a Promise: We can execute the promise by using the following syntax.

Method 1:

Javascript

<script>
    let promise = new Promise((resolve, reject) => {
      resolve("Hello JavaScript !");
    });

    promise.then((result) => console.log(result));
</script>

Output: It is shown above that result variable is used to console the result which is coming from the resolve() method.

Hello JavaScript !

Method 2:

Javascript

<script>
    let promise = new Promise((resolve, reject) => {
      resolve("Hello JavaScript !");
    });

    promise.then((result) => {
      console.log(result);
    });
</script>

Output: In this method, a callback function is passed inside the .then() method. In the callback function result, a variable is declared which is responsible for printing out the result which is coming from the resolve() method.

Hello JavaScript !

Promise Chaining: Promise Chaining is a simple concept by which we may initialize another promise inside our .then() method and accordingly we may execute our results. The function inside then captures the value returned by the previous promise 

The syntax for using promise chaining is as follows.

HTML

<script>
    let promise = new Promise((resolve, reject) => {
    resolve("Hello JavaScript");
    });

    promise
    .then( function (result1){
        console.log(result1);
        return new Promise((resolve,reject) =>{
            resolve("GFG is awesome");
        })
    })
    .then((result2) => {
        console.log(result2);
    });
</script>

Output: As illustrated above, while executing the declared promise we are returning another promise inside the .then() and executing our results accordingly. Another then is used to capture the new promise. This is known as promise chaining. This solves the problem of callback hell.

Hello JavaScript
GFG is awesome

Note: You can also declare several promises inside .then() and execute your results accordingly.