Let’s Talk About the Async and Await Keywords in JavaScript!!!!

Intro:

Recently, I’ve done a few posts about different hooks in React JS however today, I thought it would be beneficial to take a step back and talk about something within Vanilla JavaScript.

A lot of people (myself included!) make the mistake of jumping right into frameworks/libraries/projects, without having a solid understanding of the language itself so that’s why I’m doing these blog posts !!

A lot of the material I’m using is from W3schools (shout out them!). See here for more info: https://www.w3schools.com/js/js_async.asp

Check out my affiliate links to get yourself a discount:

CleverSetups:
https://cleversetups.com/?ref=y_OiTWvsl_9GD

Discount CODE: ‘VNCS’

PAPA:
Platinum: https://www.papareact.com/a/2147491765/fGcDDEcG
Diamond: https://www.papareact.com/a/2147491766/fGcDDEcG
Diamond 3 Month Split: https://www.papareact.com/a/2147491767/fGcDDEcG
GitHub Repo: https://www.papareact.com/a/2147491768/fGcDDEcG
Platinum 3 Month Split: https://www.papareact.com/a/2147491769/fGcDDEcG

As always, before I get into the post; make sure to applaud and share, so this reaches more people!

Async:

The keyword ‘Async’ makes a function return a promise.

What is a Promise?

At this point, you might be thinking ‘What is a Promise?’.

A promise is a JavaScript object that is either ‘Pending’ , ‘Fulfilled’ or ‘Rejected’ (in a similar way to real life promises!). They allow us to handle asynchronous actions!!

Typically these are the return values:

Pending — Undefined.

Fulfilled — Result object.

Rejected — Error object.

More About Async:

See this example from W3Schools:

Await:

This keyword makes a function WAIT for a promise. Both ‘async’ and ‘await’ typically go hand in hand when creating functions!

Await must be used inside of a function that makes use of the ‘async’ keyword.

This example creates a promise (hence async), the function then waits for it and then if successful, returns ‘I love you !!’!

This example is similar but waits 3000 before returning the promise!

This example performs a GET request, waiting for it to be complete, before outputting the information about it!

Final Things:

As always, remember to applaud and share this post, helping it reach more people!!!

Follow Vikram Nayyar CS on all platforms!!!

Hashtags:

#computerscience #coding #programming #technology #python #programmer #computer #developer #tech #coder #java #javascript #code #codinglife #webdeveloper #softwareengineer #html #machinelearning #softwaredeveloper #programmers #software #engineering #linux #programmingmemes #artificialintelligence #datascience #computerengineering #cybersecurity #hacking #bhfyp