In this article Iam going to simulate callback hell code into the promise based chianing code and as well async/await code

im beleving that you know about callback hell and its drawbacks to the dev's

Firstly callbacks, promise based chaining and asyn/await all are one and same and they are doing the same task.

but why we need these three to do same task,because callbacks will confuses the dev's with its syntax and to understand callback code, dev's need to roam here and there in the code block so we have promise based chaining( semi callback hell)

Still in promise chaining dev's will feel that we are writing little bit call back style syntax so we end up with Async/Await

let see how to write code in callback hell vs promise chaining vs async/await:

Required output should be like:

Downloading https:/pic1.jpg ... 
Processing https:/pic1.jpg 
Downloading https:/pic2.jpg ... 
Processing https:/pic2.jpg 
Downloading https:/pic3.jpg ... 
Processing https:/pic3.jpg

cb hell

const url1 = 'https:/pic1.jpg';
const url2 = 'https:/pic2.jpg';
const url3 = 'https:/pic3.jpg';



// callback hell 
function download(url, callback) {
  setTimeout(() => {
    console.log(`Downloading ${url} ... through callbacks`);
    callback(url);
  }, 1000);
}


download(url1, function (url) {
  console.log(`Processing ${url} through callbacks`);
  download(url2, function (url) {
    console.log(`Processing ${url} through callbacks`);
    download(url3, function (url) {
      console.log(`Processing ${url} through callbacks`);
    });
  });
});

out intention was to download pics order wise like one two three and then to process downloaded images accordingly so to achieve that we can go with callback style but what if we want do for more images we will end up with writing nested Functions, its quite difficult to maintian and for future debugs.

promise chaining:

// promise chain semi call back hell
function promisedownload(url){
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      console.log(`downloading ${url} through promise`)
      res(url)
    },1000)
  })
}

promisedownload(url1).then((result)=>{
  console.log(`processing ${result} through promise chain`)
  return promisedownload(url2)
}).then((result)=>{
  console.log(`processing ${result} through promise chain`)
  return promisedownload(url3)
}).then((result)=>{
  console.log(`processing ${result} through promise chain`)
})

in this style we should write callbacks in the promise chains like how we write in above code

that means after downolading the first image promise will gets reolved so it calls the .then so code which depends on resolved state we should write in .then block

agian we want download second image so after resolving first image wo will call the promsiedownload function with different url in .then block agian it returns the promise so we can chian agian with .then so after resoving promise, .then function will be called so like that chian will propagates.

So if you observe slightly promise chianing also like semi callback hell so will see how we can write in async/await

async/await:

const asyncFunction=async (url1,url2,url3)=>{
  try{
  const img1 =  await promisedownload(url1)
  console.log(`Processing ${img1} through promise async/await`);
    const img2 = await promisedownload(url2)
  console.log(`Processing ${img2} through promise async/await`);
    const img3 = await promisedownload(url3)
  console.log(`Processing ${img3} through promise async/await`);
  }catch(e){
    console.log(e)
  }
}
asyncFunction(url1,url2,url3)

i guess not much to say here if we see code once we can sense that, hey execution wait to download image 1 and process it and agian wait to download image 2 and process image 2 and like that it goes..

you can find total source code here so that you can try to see wether we get same output or not callbackhellToAsync/Await