Skip to content
Related Articles

Related Articles

Improve Article

JavaScript Promise Chaining

  • Difficulty Level : Basic
  • Last Updated : 31 Mar, 2021

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 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 syntax for using promise chaining is as follows.

Javascript




<script>
let promise = new Promise((resolve, reject) => {
  resolve("Hello JavaScript");
});
promise
  .then(
    new Promise((resolve, reject) => {
      resolve("Hello GeeksforGeeks");
    }).then((result1) => {
      console.log(result1);
    })
  )
  .then((result2) => {
    console.log(result2);
  });
</script>

Output: As illustrated above, while executing the declared promise we are passing another promise inside the .then() and executing our results accordingly.

Hello GeeksforGeeks 
Hello JavaScript

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :