Easiest Explanation of Async Await by SilvenLEAF
Tags: javascript, react, node, silvenleaf
Published: 2020-11-07 13:24:54

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

## SIMPLEST WAY TO USE ASYNC AWAIT
### Old JavaScript Version
```javascript
async function myFunction ( ){
  const value= await promise;

   //use the value now
   console.log(value);
}
myFunction()
```
### ES6 version
```javascript
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
```javascript
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
```javascript
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.
```javascript
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
<a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-1-4-get-silvenleaf-21e2">FETCH API (easiest explanation) (Series)</a>




## If you **have any questions** or **If you are stuck**
Feel free to reach out to me. You can also contact me on LinkedIN <a href="https://www.linkedin.com/in/silvenleaf/">https://www.linkedin.com/in/silvenleaf/</a> or on Twitter (as @SilvenLEAF).

If you wanna know more about me, this is my portfolio website <a href=" https://SilvenLEAF.github.io">SilvenLEAF.github.io</a>

#### 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
<a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-4-4-delete-by-silvenleaf-4376">
FETCH API (easiest explanation) Part 4/4 (DELETE)
</a>

###Next Blog
<a href="https://dev.to/silvenleaf/role-based-auth-easiest-explanation-javascript-by-silvenleaf-4pdb">
Role based User System (easiest explanation) (Pure JavaScript)
</a>