Javascript promise chaining with example

Javascript promise chaining with example

In this chapter, you will learn about Javascript promise chaining with example and advanced syntax. We are looking into the more advanced syntax of promises.

Promise chaining in Javascript helps to handle the multiple promises request easily. The advanced syntax of promises is very useful in asynchronous operations. If you are not aware of promises, read about What are promises in JavaScript? and come back here.

Consider the below example with nested callback function in Javascript:
As we can see in the below code snippet returns employee full name, department and salary. This approach may become more complicated as the level of nested call back goes in-depth. The Javascript promise chaining can help us to overcome this complicated approach.

// Promise that returns employee full name
    const employeeFullName = (firstName, lastName) => {
        return new Promise((resolve, reject) => {
            resolve('Employee full name is :' + firstName + ' ' + lastName);
        })
    };

    // Promise that returns employee department
    const employeeDepartment = (department) => {
        return new Promise((resolve, reject) => {
            resolve('Employee department name is :' + department);
        })
    };

    // Promise that returns employee 
    const employeeSalary = (salary) => {
        return new Promise((resolve, reject) => {
            resolve('Employee salary is :' + salary);
        })
    };

    // calling first promise
    employeeFullName('John', 'Mickel').then((fullName) => {
        console.log(fullName);

        // calling second promise
        employeeDepartment('Software development').then((fullName) => {
            console.log(fullName);

            // calling third promise
            employeeSalary(50000).then((fullName) => {
                console.log(fullName);
            }).catch((e) => {
                console.log(e);
            });
        }).catch((e) => {
            console.log(e);
        });
    }).catch((e) => {
        console.log(e);
    });

    // output
    // Employee full name is :John Mickel
    // Employee department name is :Software development
    // Employee salary is :50000

Consider the below example with promise chaining in Javascript:
As we can see in the below example, the advantage of promise chaining in Javascript is that your code will not get nested. And there will be only one catch block. We need not worry about the error catch block for every return promise. So the advance syntax of promise in Javascript can help us to handle the multiple promise requests easily.

// Promise that returns employee full name
    const employeeFullName = (firstName, lastName) => {
        return new Promise((resolve, reject) => {
            resolve('Employee full name is :' + firstName + ' ' + lastName);
        })
    };

    // Promise that returns employee department
    const employeeDepartment = (department) => {
        return new Promise((resolve, reject) => {
            resolve('Employee department name is :' + department);
        })
    };

    // Promise that returns employee 
    const employeeSalary = (salary) => {
        return new Promise((resolve, reject) => {
            resolve('Employee salary is :' + salary);
        })
    };

    // calling first promise
    employeeFullName('John', 'Mickel').then((fullName) => {

        console.log(fullName);

        // calling second promise
        return employeeDepartment('Software development');

    }).then((department) => {

        console.log(department);

        // calling third
        return employeeSalary(50000);

    }).then((salary) => {
        console.log(salary);
    }).catch((e) => {
        console.log(e);
    });

    // output
    // Employee full name is :John Mickel
    // Employee department name is :Software development
    // Employee salary is :50000