In this article we are going to see a few examples of Async Await in JavaScript for Asynchronous Tasks. Nowadays, most of the project code runs in Asynchronous matter, which is awesome! But at times we do the old-school Synchronous procedure to smoothen out the coding process. So, without wasting any time, let’s dive into what exactly Async Await is and does and how to use it in our project.
Prerequisites!
- Should know basics about Promises and its concepts
- Should know what Synchronous and Asynchronous are
- Should know JavaScript
Synchronous and Asynchronous:
Let me briefly tell you about Asynchronous and Synchronous coding. In Synchronous programming, all the tasks are lined up in a queue and are executed one after the other. They cannot cut lines and get executed randomly or in bulk either, it’s always first-come-first-serve basis for the execution of tasks. As opposed to Asynchronous programming, it’s exactly the opposite of the previous one. They execute tasks in bulk, and whichever takes less time in their execution process gets their result first. Let’s look at an example:
console.log("First Console Log");
const getData = "FETCHING DATA FROM AN API VIA HTTP REQUEST";
console.log(getData);
console.log("Second Console Log");
Did you notice the data fetched from the HTTP request got printed last, this is because of Asynchronous programming, as it did not wait on its HTTP response and went on to execute the next line of code/task. This is especially beneficial for projects performance and response time for user experience. However, there are situations where we do NOT Asynchronous coding. For instance, if we want to use the result of the first HTTP request to be used as a parameter for a second HTTP request, then we’d probably get an error thrown at us for the parameter in the second HTTP request being null or as such. For that, we use Async/await feature in JavaScript. (Don’t worry, it works for TypeScript as well.)
Usually, when we call a function method, we are returned a value that we use ahead. But when we use the “async” term attached to a function, it always returns a promise, which we use ahead. The way “async” works is that it is attached to a function to make it an async function and then we can use the promise method that it returns accordingly with the use of “await”. What “await” does is that, firstly, it is always going to be used inside an “async” function and secondly, it makes the code wait for the response to be fetched before moving on to the next task execution. It literally makes it wait for the response. Like so:
Before Async/await
function getData(){
`HTTP CALLL`
}
getData()
.then( function(value) { console.log(value) } )
.then( document.getElementById("demo").innerHTML = value; )
getData()
After Async/await
async function getData(){
const response = await `HTTP CALLL`
document.getElementById("demo").innerHTML = await reponse;
}
getData()
As you can see, promise does the same thing as Async Await, but we get rid of those “.then()” methods needed for every next task of execution. It’s much simpler and readable using Async/await.
So, what just happened?
On the left side, we’ve used Promises. Which uses .then() method for synchronous execution of tasks, kind of the same thing we want to do using Async/await done on the right side. getData() would first make the HTTP call and fetch the data from the API. After that, using “.then()” method, we’re printing the response in the console.
On the right side, we’re using “async” which also brings us a promise in response. But instead of using .then() method, we can execute our next task inside the function with the use of “await” which makes the program stop at that line and not move to the next line of code until we get a response from the line of code having “await”.
SUPPORTED BROWSERS
Chrome, Edge, FireFox, Safari, Opera
And that’s all!
Hope you guys understood what is Async/await and how they are used in JavaScript or TypeScript. Please give us your remarks in the comment. Have a great one.
