In this article we will learn how to call promise inside another promise in JavaScript.
Problem Statement: You need to first declare a promise using its basic syntax in JavaScript and further execute the pre-declared promise you need to create another promise which is to be called inside the previous promise for its execution.
Before analyzing the problem statement graphically, let’s first understand what exactly promise is and how to declare a promise in JavaScript.
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.
Promise accepts two parameters inside a function (or callback function) which is passed inside it for the purpose of result execution: the first parameter is resolved which eventually implies that your result will later be displayed successfully and another parameter is rejected which means your data will not be displayed successfully upon execution.
Example: Following syntax would be used to declare and execute a promise in JavaScript.
Javascript
let promise = new Promise((resolve, reject)=>{ resolve('neveropen'); }) .then((result)=>{ console.log(result); }) |
Output:
neveropen
As an example let’s understand the above-illustrated scenario. 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.
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.
Approach 1:
- 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:
javascript
let firstPromise = new Promise((resolve, reject) => { resolve("Hello, "); }) .then((result) => { console.log(result); return new Promise((resolve, reject) => { resolve(result + "neveropen!"); }) .then((result) => { console.log(result); }); }); |
Output:
Hello Hello neveropen!
Approach 2:
- 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 1000ms (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 2000ms (approximately equals to 2 seconds).
- Then use then() method to output the result of second parameter in console.
Example:
Javascript
let firstPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve("Hello "); }, 1000); }) .then((result) => { console.log(result); return new Promise((resolve, reject) => { setTimeout(() => { resolve(result + "neveropen!"); }, 2000); }) .then((result) => { console.log(result); }); }); |
Output:
// After 1 second...... Hello // After 2 seconds..... Hello neveropen!
