If the arrow function is:

 const customAsyncCode = async() => {      
     // Asynchronous Codes    
} 

This is how you can identify asynchronous code in your function. This time you have to identify the original asynchronous codes one by one and tell Javascript that this is my promise that it cannot go to the next instruction until it is solved. Before that we will need a promiss, right? Yes, let me start with a promise:

      const a1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          if(true){
            resolve('a 1 resolved');
          }else{
            reject('a 1 error');
          }
        }, 3000)
      })

Now we will handle this promise inside an asynchronous function. That is why I will call our Promise talk inside with an asynchronous identifying function. Now this is where we awaitneed the keyword. With this we will identify our Promise so that this Promise does not go to the next instruction until completed:

const promiseHandle = async() => {
        const data = await a1;
        console.log(data);
      }
      promiseHandle();

Notice here that I just printed the data from our premise in the next line. Yes, here asyncis awaitthe magic of it. It helps our asynchronous code behave asynchronously so that we no longer have to call the callback. We can retrieve data with a single line-by-line instruction. Now if you call this function you will see our desired data:

promiseHandle()

Now you will see that your console is printed on the next line of console log. If you have trouble understanding it, then setTimeout()you can extend the time and test it yourself by working code synchronously:

Now if the promise is rejected? Yes then try…catchwe can handle this rejection or error with our previous block. Before that, our promise to create another such thing:

      const a1Rejection = new Promise((resolve, reject) => {
        setTimeout(() => {
          if(true){
            reject('a 1 error');
          }else{
            resolve('a 1 resolved');
          }
        }, 3000)
      })

Now we async awaitwill create our function. But before we can take data from this promise, we have to try…catchput the whole thing inside the block. And with that catchblock we can access our error message:

     const promiseErrorHandle = async() => {
        try{
          const data = await a1Rejection;
          console.log(data);
        }catch(err){
          console.log(err);
        }
      }

promiseErrorHandle();

An alternative method to handle more than one promise , now we want to promise more than they can handle synchronously. Suppose we have two promise:

   const a1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          if(true){
            resolve('a 1 resolved');
          }else{
            reject('a 1 error');
          }
        }, 3000)
      })

Another one

     const a2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            if(true) {
              resolve('a 2 Resolved');
            } else {
              reject('a 2 Error');
            }
        }, 3000)
      })

Now here’s something to understand. If we Promise.alluse it, let’s see if it returns:

console.log('Return all Promise :', Promise.all([a1, a2]))

That means the promise also returns:

So with that we can easily handle multiple promises like this:

 const handleMultiplePromise = async() => {
        const data = await Promise.all([a1, a2]);
        console.log(data);
}

Well then how come their data? Yes the data will come in the same array size as we have seen before. Now call the function:

handleMultiplePromise();

The post JavaScript: async and await first appeared on Bipon's Diary.