Javascript promise chaining

Promise Chaining is a straightforward idea that allows us to initialize a second promise inside of our.then() method and then execute our results as a consequence. The value returned by the earlier promise is then captured by the function within.

There are instances when we need to run two or more related asynchronous operations, with the first operation beginning with the outcome of the prior one.

Promises come in handy when we need to manage multiple asynchronous tasks sequentially. We employ promise chaining for this. With the methods then(), catch(), and finally, we can carry out an action once a promise is fulfilled ().

Syntaxes for promises in a chain

First syntax

Sometimes we wish to carry out several asynchronous tasks in succession. Also, we must transmit the outcome of the prior stage to the subsequent one. We can employ the following syntax in this situation:

Promise_step1()
    .then(result => Promise_step2(result))
    .then(result => Promise_step3(result))
    ...
    .then(result => Promise_stepN(result))

Second syntax

Use the following syntax if we need to convey the result from the previous job to the subsequent one without passing the result:

Promise_step1()
    .then(Promise_step2)
    .then(Promise_step3)
    ...
    .then(Promise_stepN)

How to operate promise chaning

The syntax shows the javascript promise chaining operation and working procedure.

<script>
let promise_variable = new Promise((resolve, reject) => {
resolve("JavaScript chaining");
});
promise_variable
.then( function (resultInfo1){
console.log(resultInfo1);
return new Promise((resolve,reject) =>{
resolve("JavaTpoint");
})
})
.then((resultInfo2) => {
console.log(resultInfo2);
});
</script>

Explanation

The promise () function uses with the then() method.
The method shows the console tab to get the output.
The second promise function places inside of the first then() function.
We can resolve and reject operations to get the output data and functionality.

Examples

The following examples show the chaining operation of the promise function. The following example avoids multiple handlers and uses promise chaining.

Example 1

The basic promise chaining function shows two promises value as an output. We use the three promises and then() method.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.allSettled() method </title>
<script>
console.log("JavaScript's Promise Chaining Function");
let promise_variable = new Promise((resolve, reject) => {
resolve("JavaScript chaining");
});
promise_variable
.then( function (resultInfo1){
console.log(resultInfo1);
return new Promise((resolve,reject) =>{
resolve("JavaTpoint");
})
})
.then((resultInfo2) => {
console.log(resultInfo2);
return new Promise((resolve,reject) =>{
resolve("TutorialsAndExamples");
})
})
.then((resultInfo3) => {
console.log(resultInfo3);
});
</script>
</head>
<body>
<h3> JavaScript's Promise Chaining Function  </h3>
<p> The output information shows in the console tab </p>
</body>
</html>

Output

The image displayed promise chaining functions output.

Example 2

The javascript promise chaining function shows multiple promises value with the operation as an output. We use various promises and then() methods with the required time.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise Chaining Function </title>
<script>
console.log("JavaScript's Promise Chaining Function");
let promise_var = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(18);
    }, 3 * 10);
});
promise_var.then((result_var) => {
    console.log(result_var); 
    return result_var * 2;
}).then((result_var) => {
    console.log(result_var);
    return result_var * 3;
}).then((result_var) => {
    console.log(result_var); 
    return result_var * 4;
}).then((result_var) => {
    console.log(result_var); 
    return result_var * 5;
}).then((result_var) => {
    console.log(result_var); 
    return result_var * 5;
});
</script>
</head>
<body>
<h3> JavaScript's Promise Chaining Function  </h3>
<p> The output information shows in the console tab </p>
</body>
</html>

Output

The image displayed promise chaining functions output.

Example 3

The javascript promise chaining function shows multiple promises value with the operation as an output. We use various promises and then() methods with the required time.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise Chaining Function </title>
<script>
console.log("JavaScript's Promise Chaining Function");
let promise_var = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(18);
    }, 3 * 10);
});
function getEmployee(empId) {
    return new Promise((resolve, reject) => {
        console.log('Get the user from the database.');
        setTimeout(() => {
            resolve({
                empId: empId,
                empname: 'admin'
            });
        }, 100);
    })
}
function getWorkData(emp) {
    return new Promise((resolve, reject) => {
        console.log(`Get the employee data of ${emp.empname} from the API.`);
        setTimeout(() => {
            resolve(['Email', 'NUMBER', 'VPN']);
        }, 3 * 100);
    });
}
function  getWorkDataCost(services) {
    return new Promise((resolve, reject) => {
        console.log(`Calculate the Employee working cost of ${services}.`);
        setTimeout(() => {
            resolve(services.length * 100);
        }, 2 * 100);
    });
}
getEmployee(10)
    .then(getWorkData)
    .then(getWorkDataCost)
    .then(console.log);
</script>
</head>
<body>
<h3> JavaScript's Promise Chaining Function  </h3>
<p> The output information shows in the console tab </p>
</body>
</html>

Output

The image displayed promise chaining functions output.

Multiple handlers for promise chaning

It does not work on the promise chaining when we repeatedly call the then() method on a promise. One promise has several handlers. These handlers don't have any connections. Also, unlike the promise chain, they execute separately and do not pass the output from one to another.

Example

The following example uses a single promise for multiple handlers. The output shows the initial promise value for each handler.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise Chaining Function </title>
<script>
console.log("JavaScript's Promise Chaining Function");
let promise_var = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(15);
    }, 3 * 10);
});
promise_var.then((result_var) => {
    console.log("first promise value:"+result_var); 
    return result_var * 2;
})
promise_var.then((result_var) => {
    console.log("second promise value:"+result_var);
    return result_var * 3;
})
promise_var.then((result_var) => {
   console.log("Third promise value:"+result_var);
    return result_var * 4;
})
</script>
</head>
<body>
<h3> JavaScript's Promise Chaining Function  </h3>
<p> The output information shows in the console tab </p>
</body>
</html>

Output

The image displayed promise chaining functions output.

Conclusion

The promise chaining shows multiple outputs using the "then()" method. The method uses the promise variable. It works for single input and multiple outputs using equations.

Next TopicHow to check two array values are equal in JavaScript

← prev next →