How to call promise inside another promise in JavaScript ?

In JavaScript, to call promise inside another promise we first declare a promise using its basic syntax and further execute this promise then create another which is to be called inside the previous promise for its execution.

Promise is basically a JavaScript object which is responsible for handling all the asynchronous operations or activities like fetching data from the API and so on.

Syntax:

let promise = new Promise(function(resolve, reject){
     //do something
});

Parameters:

• The promise constructor takes only one argument which is a callback function
• The callback function takes two arguments, resolve and reject
  • Perform operations inside the callback function and if everything went well then call resolve.
  • If desired operations do not go well then call reject.

Example: This example shows the declaration and execution of a promise in JavaScript.

Here we need to first declare a Promise by using the Promise syntax, and we will be using the then() method for its execution and then inside that then() method we will create another promise by using the same Promise syntax as illustrated above, and then we will call our result of first inside that new Promise.

Javascript

let promise = new Promise((resolve, reject)=>{
    resolve('GeeksforGeeks');
})
.then((result)=>{
    console.log(result);
})

Output

GeeksforGeeks

Now after analyzing the above facts related to our problem statement let’s see the following approaches to understand and analyze our problem statement more effectively.

Naive Approach

• This is basically the native and simple approach wherein at first we could start by declaring the promise using the above-illustrated promise syntax.
• Then we may declare our then() method for handling the result of this promise created.
• After then() method we will declare another promise using the same Promise syntax.
• Then we will call the result of our first promise inside the second promise and also for better understanding we will use our first promise result along with second promise result to see how exactly the process is working on.

Example: Below is the example.

javascript

let firstPromise = new Promise((resolve, reject) => {
    resolve("Hello, ");
})
    .then((result) => {
        console.log(result);
        return new Promise((resolve, reject) => {
            resolve(result + "GeeksforGeeks!");
        })
            .then((result) => {
                console.log(result);
            });
    });

Output

Hello, 
Hello, GeeksforGeeks!

Using setTimeout() method to call promise inside promise

• In this approach we will take setTimeout() method into consideration for better understanding of how exactly promise calling process is working on.
• As illustrated in Approach-1 first declare a new promise and then wrap your result in setTimeout() method and provide a time-delay of 100ms (approximately equals to .1 second).
• Then after using then() method for executing the result declare another promise and inside that second promise firstly print the result of first promise.
• Then after the result of first promise, wrap the result of second promise also in setTimeout() method and provide a time- delay of 200ms (approximately equals to .2 seconds).
• Then use then() method to output the result of second parameter in console.

Example: This example demonstrates the use of setTimeout() method to call a promise inside another promise.

Javascript

let firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Hello ");
    }, 100);
})
    .then((result) => {
        console.log(result);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(result + "GeeksforGeeks!");
            }, 200);
        })
            .then((result) => {
                console.log(result);
            });
    });

Output

Hello 
Hello GeeksforGeeks!