How to rewrite callback hell using promises and async/await? JAVASCRIPT

[shivajikobardan]

function createOrder() {
  setTimeout(function() {
    console.log("order created");
      setTimeout(function() {
         console.log("order received");
            setTimeout(function() {
               console.log("preparing food");
                  setTimeout(function() {
                      console.log("order ready");
                          setTimeout(function() {
                             console.log("order delivered");
                          }, 6000)
                   }, 4000)
             }, 5000)
      }, 1000)
   }, 2000)
}

createOrder();

This is the callback hell in question.
Source: https://learnwithtriveni.com/2022/08/19/callback-hell-in-javascript/

I want to rewrite it using promises and async awaits.

I've indeed done it with promises and async, as shown here:

async function createOrder() {
  setTimeout(() => {
    console.log("order created");
  }, 1000)
}

createOrder().then(
  setTimeout(() => {
    console.log("order received");
  }, 2000))

  .then(
    setTimeout(() => {
      console.log("preparing food");

    }, 3000)
  )

  .then(

    setTimeout(() => {
      console.log("order ready");
    }, 4000)
  )

  .then(
    setTimeout(() => {
      console.log("order delivered");

    }, 5000)
  )

Now, I want to do the same using async and await and only using promises.
I know the full syntax of async/await and promises as well. 
I'll share if required.

Can you share the code for it? I'm really confused. It'd be really helpful to see and feel the code.

https://www.freecodecamp.org/news/how-to-deal-with-nested-callbacks-and-avoid-callback-hell-1bc8dc4a2012/

I've read this article but since I don't know much about burgers lol(or maybe this article wasn't a great fit for me anyways), this article was so difficult to read for me and I ended up learning nothing.
 

 

[wasab]

create helper function

const createPromise = (logMessage, timeOut = 1000) =>{
  return new Promise((resolve, _)=>{
    setTimeOut(()=>{
      console.log(logMessage);
      resolve("done");
    }, timeOut);
  });
}

then do your chaining with async and await

const test = async () => {
  await createPromise("order received", 2000);
  await createPromise("preparing food", 3000);
  await createPromise("order ready", 4000);
  await createPromise("order delivered", 5000);
}

test();

you can make it parallel as well so they are none blocking. do this if result of the next promise does not depend on the previous. 

const test = async () => {
  const [result1, result2, result3, result4] = await Promise.all([
    createPromise("order received", 2000),
    createPromise("preparing food", 3000),
    createPromise("order ready", 4000),
    createPromise("order delivered", 5000)
  ]);
}

 

key concept. await is just syntactic sugar for .then. when you do "await xyz()", you are just doing "xyz().then(()=>{// call back function })". whatever happens after await is whatever is inside the .then callback

 

return from await is the param of the callback inside the .then. e.g. "const result = await xyz()" is the same as "xyz().then((result)=>{// call back function })". 

 

For most purposes, just understanding these two above should be enough. you dont really need to dig any more into it.