Easiest Explanation of Async Await by SilvenLEAF

No more promise hell. Using async await is way easier than you can imagine.

SIMPLEST WAY TO USE ASYNC AWAIT

Old JavaScript Version

async function myFunction ( ){
  const value= await promise;

   //use the value now
   console.log(value);
}
myFunction()

ES6 version

const myFunction = async ( )=>{
   const value= await promise;

   //use the value now
   console.log(value);
}

myFunction();

Define a function with async before it. Now you can use await inside this function. Use it like this const value = await promiseFunction( ). How does it work? A promise takes some time to resolve. This await will pause our code like a remote control until the promise is resolved. When it is resolved, it will store the received data inside the value variable.

COMPLETE GUIDE FOR USING ASYNC AWAIT

const getData = async( )=>{
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

  const data = await response();

  console.log(data);
}
getData( );

What's happening on the code?

First we are defining a function with async before it. Now we can use the await keyword inside this function. As we know Fetch is a Promise too (I used fetch as an example, you can use any promise you want). So I used await before it. I mean, fetch is asynchronous so it'll take some time to fetch the response. await will pause the code until Fetch fetches the response. Then it'll resume the code. And store the response inside response variable.

Similarly, response.json( ) is asynchronous too. So, using await to pause the code until the promise is resolved. When it does, it'll store the received data inside data variable.

See that no matter how many promises we get, async await makes it look completely like synchronous code. Suppose we have 10000s of promises (one after another), then, using async await it'll be like this

const myPromiseHell = async( )=>{
  const A = await promiseA;
  const B = await PromiseB;
  const C = await PromiseC;
  //...10000s more
}

See how easy it is when we use async await. Now imagine if we used Promises or Callbacks, it'll be an ULTIMATE NIGHTMARE.

DEMO (PLAYTIME)

Copy-paste this code on your browser console (mine is chrome) and hit enter.

const getData = async ( ) =>{
   const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

   const data = await response.json( );

   console.log(data);
}

getData( );

To know MORE ABOUT FETCH API see this blog
FETCH API (easiest explanation) (Series)

If you have any questions or If you are stuck

Feel free to reach out to me. You can also contact me on LinkedIN https://www.linkedin.com/in/silvenleaf/ or on Twitter (as @silvenleaf ).

If you wanna know more about me, this is my portfolio website SilvenLEAF.github.io

I'd LOVE to be your friend, feel FREE to reach out to me!!

Next Blogs DATE

• Nov 12th, 14th, 16th 2020, Create login signup system with Passport (Series)

• Nov 18th 2020, How to create Login with Google

• Nov 20th 2020, How to create Login with Github

• Nov 22th 2020, How to create Login with LinkedIn

• Nov 24th 2020, How to create Login with Twitter

• Nov 26th, 28th, 30th 2020, Password Reset Series (with Node.js and React)

If this blog was helpful to you,

PLEASE give a LIKE and share,

It'd mean a lot to me. Thanks

Prev Blog

FETCH API (easiest explanation) Part 4/4 (DELETE)

Next Blog

Role based User System (easiest explanation) (Pure JavaScript)