Navigate

Home
Learn
Promises as Solution to Callback Hell in Javascript

Promises as Solution to Callback Hell in Javascript

$$/$$

Can you recall the code you saw in the segment on Callback Hell? Given below is that code:

Code Snippet *:

// CALLBACK HELL
// function to fetch details of user in Student Management System
const fetchUserDetails = (username, password, callback) => {
    database.authenticateUser(username, password, (error, userInfo) => {
        if (error) {
            callback(error);
        } else {
            database.getRoles(userInfo, (error, rolesInfo) => {
                if (error) {
                    callback(error);
                } else {
                    database.getPermissions(rolesInfo, (error, permissionsInfo) => {
                        if (error) {
                            callback(error);
                        } else {
                            callback(null, userInfo, rolesInfo, permissionsInfo);
                        }
                    });
                }
            });
        }
    });
}

const callback = (error, userInfo, rolesInfo, permissionsInfo) => {
    // some code here
}

*Note that the above code will not run as it is because there is no database object yet on which you can invoke the specified methods. It is just an overview of how a small application can be defined.

Do you remember that you were told that promises actually solve the problem of the callback hell? How? Well, you’ll learn that in the next video with Srishti.

$$/$$

Following is the code which you looked at in the last video when dealing with the problem of callback hell using promises:

Code Snippet:

// USING PROMISES
// function to fetch details of user in Student Management System
const fetchUserDetails = (username, password) => {
    database.authenticateUser(username, password)
        .then(userInfo => dataBase.getRoles(userInfo))
        .then(rolesInfo => dataBase.getPermissions(rolesInfo))
        .then(permissionsInfo => {
            // code written inside the function named 'callback'
        })
        .catch((err) => {
            // code to handle error
        });
};

Clearly, following are the advantages of using promises:

Improved code readability
Better error handling
Neater way of defining flow of logic control
Reducing inter-dependency of code (coupling)

In the section of callbacks, you looked at another example of callback hell with Sakshi. Let us look at that example too and see how promises solve the problem of callback hell.

$$/$$

In the last video, you looked at the solution to solve the problem with callback hell. Modify the example taken in the video to add 'getContinents' in the chain gives the following code snippet:

Code Snippet:

const getAddress = () => {
 getContinents.then(continent => {
   return getCountries(continent);
 }, error => {
   console.log(new Error(error));
 }).then(country => {
   return getStates(country);
 }, error => {
   console.log(new Error(error));
 }).then(state => {
   return getCities(state);
 }, error => {
   console.log(new Error(error));
 }).then(() => {
   return done();
 }, error => {
   console.log(new Error(error));
 });
}

const getContinents = new Promise((resolve, reject) => {
 setTimeout(() => {
   // code to get all continents
   let continent = "Asia";
   console.log(continent);
   resolve(continent);
 }, 1000);
});

const getCountries = (continent) => {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     // code to get all countries
     let country = "India";
     console.log(country);
     resolve(country);
   }, 1000);
 });
}

const getStates = (country) => {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     // code to get all states
     let state = "Rajasthan";
     console.log(state);
     resolve(state);
   }, 1000);
 });
}

const getCities = (state) => {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     // code to get all cities
     let city = "Jaipur";
     console.log(city);
     resolve();
   }, 1000);
 });
}

const done = () => {
 console.log("DONE!");
};

getAddress();

Output:

Asia
India
Rajasthan
Jaipur
DONE!

Alright, seems like promises are the best way to deal with asynchronous behaviour in JavaScript. Wait, there’s even a better solution than promises. You’ll look at it in the next segment.