Watch the entire #JavaScriptJanuary series from the beginning!

It is essential to understand how promises work before learning Async/Await since Async/Await is basically just syntactic sugar wrapped around Promises, making them easier to work with.

Now that we have learned about Promises and Fetch I will show you how we can rewrite a fetch statement using Async/Await.

So without Async/Await we use “.then” to wait on data to be returned. This is fine for simple requests, but when we are dealing with multiple promises it can get a bit confusing as to when each line will get executed.

With Async/Await we can write code that looks synchronous but is actually asynchronous.

The first thing that we must do is wrap our asynchronous code in a function. And we add the “async” keyword before the function. Now within the function we can create a response const and use the “await” keyword before our promise, which in this case is our fetch statement.

Now on the next line we do the same thing awaiting our response.json(). On the last line we are logging the json data. This line will “wait” on the previous lines to complete. So this is very logical in the way that it is written and easy to understand.

Note that you cannot use the “await” keyword without the “async” keyword attached to the function. These only work together.

The function itself can be a standard function, or it can be an arrow function, or even an anonymous function that calls itself.

So understanding how Promises and Async/Await work together can make your code cleaner and more logical.

I’ll be releasing a new video every day in January! Stay tuned..
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#JavaScriptJanuary #31Days31Videos #codeSTACKr

source