Thread by @SavvasStephnds

What is async/await in Javascript? Let's explain

(Thread) 👇🧵

#100DaysOfCode
#CodeNewbies

We've already talked about Promises in a previous thread. Read it if you haven't already. This thread will be a continuation of that thread so please see that first:

So as we mentioned before, Promises are a way of telling Javascript, "go fetch some data but I'm not going to sit and wait because my browser would freeze. When you DO get a response eventually, do THIS with the data".

It would look something like this:

getData("api.example.com/data")
.then((response) => {
console.log(response)
})

Basically:
- request the data
- *when the data is received* print them to the console

Now imagine this scenario:

- You need to make an API call to get user details
- You then need to extract the User ID from the details
- Then you need to make another API call to get user records using the User ID you got from the first API call

You will need to call a Promise within a Promise.

Example:

getData("api.example.com/get-user-detai…")
.then((userDetails) => {
getData("api.example.com/records/" + userDetails.id)
.then((recordsById) => {
console.log(recordsById)
})
})

You can see how this can become messy. What if you need to do 3 API calls? Or 4? Or more? It will become a nightmare to maintain! Take a look at this:

Is there a better way to do this? A cleaner, less messy way that doesn't involve nesting promises within promises within promises?

Yes there is. 👍

Enter: async / await!

async/await is a way to tell the browser, "please sit and wait for data to return before proceeding to the next line (like how other programming languages do it), BUT DO NOT WORRY! I will STILL return a Promise at the end of all this so you won't freeze!"

How do we use this? First we want to make a commitment that this whole thing will return a Promise. This is what "async" does. It declares a function as "asynchronous", basically meaning that it will return a Promise.

This is how it's done:

async function stuffWithData(){

}

No matter what you return here, it will be returned as a Promise.

Now we can tell this function, "whenever you request data, sit and wait for a response before proceeding to the next line. And we do this with the "await" keyword.

Example:

What the code above does:

- It prints "Getting user details..." in the console
- Requests some data and *awaits* for them to be returned
- Saves the response in the userDetails variable
- Once this is done, print "All done!" to the console.

But, I hear you ask, didn't we say that sitting and waiting for data to be received will freeze my browser? What's going on here?

In this case, NO! Why? Because we used "async" at the beginning of our function, the function can only return a Promise at the end. That means your browser is safe from freezing! 🙌

With async/await, this is what your code now looks like. Compare this with the previous code. Much less messy right?

Because this function returns a Promise, you'll need to call it the usual way:

stuffWithData()
.then((response) => {
console.log(response)
})

And this is what makes async/await so great and so friendly to both the browser, the user and the developer!

Happy browser

Happy user

Happy developer!

Thank you for reading. I hope this made async/await a little clearer!