How to call promise inside another promise in JavaScript?


When working with JavaScript, you may find yourself needing to call a promise inside another promise. While this may seem like a daunting task, it is actually quite simple once you understand the basics of promises. In this article, we will discuss how to call a promise inside another promise in JavaScript.

The Basics of Promises

In order to understand how to call a promise inside another promise, it is important first to understand the basics of promises. A promise is an object that represents the eventual result of an asynchronous operation. Promises are used in JavaScript to handle asynchronous operations in a more synchronous way.

Calling a Promise Inside another Promise

Now that we have a basic understanding of promises, let us discuss how to call a promise inside another promise. The first thing you need to do is create a function that returns a promise. This function should take in an input and resolve or reject the promise based on the input.

Next, you will need to create a promise and pass the function you created in the previous step as the input. Once the promise is created, you can call the function that you passed in as the input. This will return a promise that is either resolved or rejected.

Example 1

Below is the full working code example −

<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result1"></div> <script> function func1(input) { return new Promise(function(resolve, reject) { if(input === "resolved") { resolve("resolved"); } else { reject("rejected"); } }); } var promise = new Promise(function(resolve, reject) { func1("resolved").then(function(result) { resolve(result); }).catch(function(error) { reject(error); }); }); promise.then(function(result) { document.getElementById("result1").innerHTML = result // "resolved" }).catch(function(error) { document.getElementById("result1").innerHTML = error // "rejected" }); </script> </body> </html>

In the above code example, we have created a function that returns a promise. This function takes in an input and resolves or rejects the promise based on the input. We have then created a promise and passed the function we created in the previous step as the input. Once the promise is created, we can call the function that we passed in as the input. This will return a promise that is either resolved or rejected.

Example 2

Below is another example of calling a promise inside another promise. −

<html> <body> <h3>Calling a promise inside another promise</h3> <script> let firstPromise = new Promise((resolve, reject) => { resolve("Hello, "); }) .then((result) => { document.write(result); return new Promise((resolve, reject) => { resolve(result + "<br> Welcome to JavaScript!"); }) .then((result) => { document.write(result); }); }); </script> </body> </html>

Benefits of Calling a Promise Inside another Promise

There are a few benefits of calling a promise inside another promise. The first benefit is that it allows you to handle asynchronous operations in a more synchronous way. The second benefit is that it makes your code more readable and easier to understand.

Disadvantages of Calling a Promise Inside another Promise

There are a few disadvantages of calling a promise inside another promise. The first disadvantage is that it can make your code more complex. The second disadvantage is that it can make your code less performant.

Conclusion

In conclusion, calling a promise inside another promise is a great way to handle asynchronous operations in a more synchronous way. However, it is important to keep in mind that this technique can make your code more complex and less performant.

Updated on: 14-Sep-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements