What is Promise chaining in JavaScript?-JS Tutorial-php.cn

What is Promise chaining in JavaScript?

王林

Release： 2023-09-08 15:45:07

forward

818 people have browsed it

JavaScript 中的 Promise 链是什么？

In this tutorial, we will discuss Promise chaining in JavaScript. Before turning to Promise chains, let’s first talk about what Promise is

So, we know that JavaScript is single-threaded, which means that two functions are not allowed to run at the same time, because we only have one call stack, as shown below, which has one function to execute

When one function completes execution, another function starts execution, so in order to achieve two or more functions running at the same time, we use asynchronous programming in the JavaScript example - setTimeout function, which accepts a callback function and the specified time, After that it will execute the function.

setTimeout(function cT(){
   console.log("I am here after 5 seconds")
}, 5000);

Copy after login

Therefore, we use Promise for asynchronous operations, which gives the result of the asynchronous operation and its completion or failure.

Just like in real life, we commit to completing any work in the same way that we make a commitment, and it exists in one of three states.

Pending - This represents the initial state, meaning it is neither completed nor rejected.
Fulfilled - This means that the operation we assigned completed successfully.
Rejected - This status means that the operation cannot be performed and it is rejected.

The asynchronous method returns a value, but it does not return the final value, but returns a promise to provide the value for the function in the future.

We use the

then() method to execute the Promise after the Promise statement. If it is rejected due to some error, it will be processed using a catch block.

How to declare Promise in JavaScript?

let promise = new Promise(function (resolve, reject) {
   return resolve("Hello I am resolved");
});

Copy after login

There is a function inside the promise here, called the callback function, which has a parameter as two methods

resolve() and reject(), as we already know Judging from the above explanations about both.

So resolve here ensures the successful completion of the function we give, while reject will ensure its responsibility for the unsuccessful completion of the given executable callback function.

Example 1

Let’s look at a program that uses Set to find unique characters in a string.

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in JavaScript</title>
</head>
<body>
   <h3> Execute a Promise we receive</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve("Hello I am resolved");
      });
      promise.then(function(value) {
         console.log(value);
         document.getElementById("result").innerHTML += value;
      })
   </script>
</body>
</html>

Copy after login

Inside above. The then() method will pass a callback function, and the value variable is responsible for printing out the results from the resolve() method.

What is a promise chain?

Promise chains are basically multiple asynchronous function calls and executing them one after the other in a synchronous manner. then() method.

Example 2

Let us understand in detail through an example.

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in JavaScript </title>
</head>
<body>
   <h3> Promise Chaining</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve(10);
      });
      promise.then(function(firstPromise_val) {
         alert(firstPromise_val)
         document.getElementById("result").innerHTML += "First Promise val: "+firstPromise_val+"<br>";
         return firstPromise_val+10;
      }).
      then(function(secondPromise_val){
         alert(secondPromise_val)
         document.getElementById("result").innerHTML +="Second Promise val: "+ secondPromise_val+"<br>";
         return secondPromise_val+10;
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         document.getElementById("result").innerHTML +="Third Promise val: "+thirdpromise_val+"<br>";
         return thirdpromise_val+10;
      })
   </script>
</body>
</html>

Copy after login

Let us understand how promise chain works.

.then() method calls it to create a new Promise and get it resolved.
.then() method again, it creates a new Promise, which then also gets resolved.

So, basically the

.then() method returns a new Promise and uses .then() to call next and so on.

Example 3

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in javascript</title>
</head>
<body>
   <h3> Promise Chaining</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve("My");
      }).
      then(function(firstPromise_val) {
         alert(firstPromise_val)
         return firstPromise_val+" Name";
      }).
      then(function(secondPromise_val){
         alert(secondPromise_val)
         return secondPromise_val+" is";
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         return thirdpromise_val+" Kalyan";
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         document.getElementById("result").innerHTML = thirdpromise_val
      })
   </script>
</body>
</html>

Copy after login

So we see an in-depth concept from the basics to the promise chain on how it works.

The above is the detailed content of What is Promise chaining in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!