async-await and promises explained in JS [simplified]

note: all concepts are connected so to know one thing you need to understand other concepts as well

blocking code

lets suppose you have loop in your program that takes years to complete. Now you Have two options either move on or wait. If you choose to wait then it will considered blocking code. If not then you dont have choice 🤣. lets seeeee.

//blocking code
let sum = 0;
for(let i = 1;i<Number.MAX_SAFE_INTEGER;i++){
  for(let j = 1;j<Number.MAX_SAFE_INTEGER;j++){
      sum = i+j;
}
}
console.log(sum);
// above program is dummy and does not serve any purpose

now as you can see for won't let run programs that are below it before it completes. Now sum to run we have to wait for years and user might miss out some important things(other functionalities).

To bypass such situations we can put for and console.log(sum) to some file that can run parallelly to our code and wait until we give it a green signal. This is called async. Async code run parallel to the main code and only runs after main code finishes.

If async code has another async code in it. It won't run until outer finishes.

homework problem

what will be the output of the below program ?

• setInterval is a inbuilt JS function to run program in interval.

// will inner ever run ? if yes then why (ask gemini/gpt)
setInterval(()=>{
  console.log("outer");
  setInterval(()=>{
    console.log("inner");
  },1000)
},1000)

non-blocking code

setTimeout(()=>{
   console.log("outer");
   setTimeout(()=>{
     console.log("inner");
     for(let i = 1;i<1000;i++){}
     console.log("inner finished");
   },0)
   console.log("outer finishes");
},0)
console.log("i will run first");

output

i will run first
outer
outer finishes
inner
inner finished

note:From above code you can device that outer block now act as a main code while as inner as async code.

you see even console.log("i will run first") written after main code it runs first. How ? this is called non-blocking or async code. It does not hinder main functionality of your program. Let you do time taking operations in your application such as writing and reading.

async-await

await keyword always wrapped in async function and won't let other code below it executive until it finishes. Async and await are key-pair. One more thing, await always placed before functions that return promises and always always wrapped it in try catch block.

async function myPromise(){
 try{
  await doSomething(); // a function that return promise
  console.log("Your file is successfully created"); //only runs when promise is accepted
  }
  catch(err){
   console.log(err); // if promised is rejected;
  }
}
myPromise();
console.log("first");

output

# consider promise to be successful
first
Your file is successfully created

Understanding till now (conclusion):

1. A function returns promise always wrapped in async-await.
2. async-await goes hand in hand.
3. Always wrap await in try-catch block. (refer my blog if not)
4. Now a programs outside async function will always run regardless of it gets resolved or rejected as shown above. (that is the beauty 👄)
5. now lets understand promise

now lets start with applications of promises

1. API requests - Bring data from another server
2. File Operations - reading and writing files
3. Database queries - fetching or writing data

do you find something common in all use cases?

yes all application takes time to execute.

Promise gives us superpower to handle such situation adequately. Again Promises and async-await goes hand by hand.

Promises has 3 states (as shown in above example)

• resolved (if so then our file is successfully created will run)
• rejected (a code in catch block will run)
• pending (it will wait and won't let any code to run inside function)

lets create a custom promise in JS

A async keyword outside a function that returns promise is purely optional. See below code...

fetchData

// trying to mimic as a server response
function fetchData(success=false){
  return new Promise((resolve,reject)=>{
    if(success){
      setTimeout(()=>{
        resolve("fetched successfully");
      },5000) // execute after 5 sec
    }
    else
    reject("server is not responding");
  })
}
// lets consider fetchData is in-built function

main

/* lets consider fetchData is a in-built function that gets data from other server. We are passing success para to just mimic the server otherwise it does not serve any purpose here.
*/
async function getData(){
  try{
    let result = await fetchData(true);
    console.log(result) //fetched successfully
  }
  catch(err){
    console.log(err); // in case of rejection
  }
}
getData();
// load other code

The other code will also run regardless of data fetched or not. It improves performance and improve quality of our code.

references

error-handling-by-aryan