xxxxxxxxxx
console.log('Start');
//COMMENT::Three callback function
function loginUser(email, password, callback) {
setTimeout(() => {
console.log('Now we have the data');
callback({ userEmail: email });
}, 1500);
}
function getUserVidoes(email, callback) {
setTimeout(() => {
callback(['HTML', 'CSS', 'JAVASCRIPT']);
}, 1200);
}
function videosDetails(video, callback) {
setTimeout(() => {
callback(`title of the video ${video}`);
}, 1000);
}
//COMMENT::Callback function execution.
//here we get nested function of 3 callback function which make code not clean.
//this problem is call callback hell.
const user = loginUser('shirshakkandel@gmail.com', '1234', function (user) {
console.log(user);
getUserVidoes(user.userEmail, videos => {
console.log(videos);
videosDetails(videos[0], title => {
console.log(title);
});
});
});
// console.log(user);
//undefined as user come after 1.5 second
console.log('Finished');
xxxxxxxxxx
// defination
Callback hell is a phenomenon that afflicts a JavaScript developer
when he tries to execute multiple asynchronous operations one after the other.
By nesting callbacks in such a way,
we easily end up with error-prone, hard to read,
and hard to maintain code.Soln: Best code practice to handle it.
//example
const makeBurger = nextStep => {
getBeef(function(beef) {
cookBeef(beef, function(cookedBeef) {
getBuns(function(buns) {
putBeefBetweenBuns(buns, beef, function(burger) {
nextStep(burger);
});
});
});
});
};
xxxxxxxxxx
function task1(callback) {
setTimeout(function() {
console.log("Task 1");
callback()
},2000)
}
function task2(callback) {
setTimeout(function() {
console.log("Task 2");
callback()
},2000)
}
function task3(callback) {
setTimeout(function(callback) {
console.log("Task 3");
callback()
},2000)
}
function task4() {
console.log("Task 4");
}
function main() {
task1(function() {
task2(function() {
task3(function() {
task4();
})
})
})
}
main();
xxxxxxxxxx
/*
this is the brainstormDinner function. It's a little silly.
It returns a promise that uses a series of setTimeout()
functions to simulate a time-consuming asynchronous action.
It's a good example of "callback hell" or "the pyramid of doom,"
two ways people describe how confusing a bunch of nested
callback functions can become.
*/
const brainstormDinner = () => {
return new Promise((resolve, reject) => {
console.log(`I have to decide what's for dinner...`)
setTimeout(() => {
console.log('Should I make salad...?');
setTimeout(() => {
console.log('Should I make ramen...?');
setTimeout(() => {
console.log('Should I make eggs...?');
setTimeout(() => {
console.log('Should I make chicken...?');
resolve('beans');
}, 1000);
}, 1000);
}, 1000);
}, 1000);
});
};
module.exports = brainstormDinner;
xxxxxxxxxx
getArticles(10)
.then((user) => getUserName(user.name))
.then((place) => getAddress(place.city))
.then((data) => console.log("Data", data))
.catch((err) => console.log("Error: ", err.message));
xxxxxxxxxx
function getArticle(id) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("Fetching data....");
resolve({ id: id, name: "derik" });
}, 5000);
});
}
getArticle("1").then(res=> console.log(res))