#30 - Async - Await Concept in JavaScript With Easy Examples

hey guys this is Lavinia welcome back to Naveen automation Labs so with this video we are going to talk about uh async and await Concept in JavaScript so so far what we have seen here uh in the JavaScript we have seen that what do you mean by callback function then we have seen the Callback uh hell also we have seen that then we have seen the concept of promises and now we are going to talk about async so this is a sequence that we have to follow that async and update this is a modern way of handling the asynchronous calls or asynchronous steps that you are having it in your function so earlier we used to have callback but the Callback is having many issues like callback hell and everything then we started using a promises and then on top of promises JavaScript has given the option to create async and await so async can await there are a couple of things that we have to understand first of all it's a way of handling the asynchronous step and mainly it is used with promises only okay so that's why the understanding of the promises is very important before learning async and upgrade so if you haven't seen the promises videos please go and check the promises video first so it is used with the promises and always remember that async is a kind of modifier that you can use it with the function right or you can say async is a kind of a keyword also that you can use it here and then a weight is another operator or again a keyword you can use it here that will be used for the asynchronous steps that you are writing in this particular async function so I'll say that this is my keyword which is written before the function name we can say that so if a particular function is asynchronous function inside that particular asynchronous function we have various steps and then we are going to use the await for those steps which are having the asynchronous concept so for example let's see I have a function and then I'm going to write async and let's see this is a function that I have created in this particular function let's see I have number of steps there so let's see few steps are there so first let's see I'm writing simple uh normal step right so here with this normal step let's see this is a synchronous step then in that case I don't need to use no need of a weight keyword or operator here but let's see step number two let's see this is Step number one and then step number two is the asynchronous step what do you mean by asynchronous step means which is taking some time to execute the specific step let's say timeout or any we are fetching the data from the database or API response or coming which is taking some time right so we need to provide a weight here right so that keyword we have to use of it so how will you write away so before the step number two we have to write a weight here again let's see another step number uh three is there this is also one asynchronous a step which is taking some time so here we are going to write a weight here but step number one this is a synchronous step you don't need to write any await here although you can write it but it does not make any sense so every step which is taking some time and which is actually giving me a promise and which is taking some time for example let's see this is taking around five seconds of time so it will hold this particular step for five seconds and then only step number three will be executed if you don't write a wait and await over here in that case what will happen everything will be running in the concurrently or you can say in the parallel mode so we want a specific sequence that okay please first fill the first name then last name then something else then step number four step number five step number six step by step that we have to do it in that case we have to mandatory to write a weight over here now one more thing here that what if I have a normal function which is not written with async it means this is not a asynchronous function so in that case I cannot write remember this thing I cannot write a weight here a weight step here this is just a normal function so in that case I cannot write a weight here remember this thing by default all the async function I'm writing it here that it will return what it will return a promise this is mandatory so remember this thing this is mandatory okay now a couple of other things also here let's see I have a function which is one async function I have written whatever some async function that I'm writing it let's see I'm saying you have to return 42 but 42 I'm returning it so this is not a promise and now I have written here that okay it will return a promise this is mandatory and This Promise could be what it could be resolved promise also or it could be a rejected promise also that we have already seen that in a promises there are two major steps resolved and rejected but here if I'm writing async function and return 42 so here this 42 is not a promise but what exactly it will do it will wrap 42 in the result promise and then it will return from the function so what kind of function it is this is async function if you have not to return any async step or if you have not written any promise also in that case the normal return let's say 42 or any string or any integer that you are passing it will resolve it will wrap in the resolve promise and then it will return same thing if you are writing another async function and let's see this async function is actually giving me an error so for example let's see a simple async function which is giving me a normal error so let's see I'm writing uh one throw keyword and the new error that I'm returning it with some uh error messages here like that so this is also not a promise but this is again async function and with async function it is mandatory to return a promise so in this case also what exactly it will do it will wrap or I will say wrap the error in a rejected promise and return like this okay so remember one thing in this particular promise uh in this particular function if it is declared with the async if you have not written any promise or any async step also it will always return a promise if you have a normal value it will wrap it with the result promise if it is throwing some error or any exception or anything it will resolve with the rejected promise and then it will return and I cannot write a weight step if it is not a async function but let's see if I have tomorrow another uh let's see one more function that I have written with the async function that is what I have written but I don't have I don't have uh any awake okay any await or I would say any asynchronous step can I write a function like this yes you can write it here without any problem so it is not mandatory that okay inside the async function you have to write a weight but the vice versa that if you are using a normal function if it is not async then you cannot write a wait step there so remember these are the simple basic things that you have to write so can we write a function like this I'm creating one async function and this function is actually returning what this function is actually returning a promise directly yes we can do it here so return a promise and then whatever the result promise which is actually returning it then I can write it okay fine that you can return a resolve promise and whatever let's say you want to return something return 42 I can let's rewrite it here so here this function is what this function is returning me a result promise right and let's see this function I'm writing the function name is for example let's see uh F1 function and this function is being called inside the F2 function right so this F1 function is giving me what a promise so what I'll do here that okay fine I'm going to create async here well let's remove this async from here now this F2 function I'll be creating async and now I'm calling a weight what I'm calling this F1 function because F1 function is what this F1 function is a kind of async step for me which is actually returning a promise to me so here now we have to write a weight and then I'm calling F1 function from here right I hope this is clear so let's see one simple example one more time so some real time example for example let's say I'm going to create one async function here and the function name is could be anything let's see a get the user data this is a function name that I'm going to create and then in this particular async function that I have a number of steps so let's see I'm calling some API and I'm fetching the user data right so this is my asynchronous call and then for this asynchronous call what we have do we have to use the await here right because this is my async which is taking around let's see five seconds to fetch the data so we have to hold the execution for the five seconds but let's see in the next slide I'm simple creating uh let's see console.log I'm printing something here that okay log something that okay get the data so forget the data this is not the asynchronous step this is simple as synchronous step which is not taking any time so in this case I don't need to write any await here but again let's see I'm just uh entering the data in the database or dumping the data into the database or let's say writing uh the data in DB or in some file that we are writing so this is again asynchronous system which is taking around let's see 10 seconds of time so again this particular step that we have to write with the await here once again the data is available again and let's see I'm creating a simple array or any variable that I'm going to create let's see one constant variable let's see simple variable which is equal to 10 this is not the asynchronous call this is a normal synchronous call so in that case also I don't need to write any await here so remember update we have to write only and only when there is a asynchronous step fine so let's practically let's see how to do that so I'll do one thing let me create uh one file here and we are going to talk about that async await this file is already available so I'm writing concept.js here okay and uh let's see that I'm going to create a function or I would say I'm going to create one asynchronous a function without a weight right so you can just simple without a weight also you can write it so see this here I'm writing one async function and let's see this is a function and I'm writing let's see the function name is F1 something like this what if the function name that you want to write and here I'm just simple say that simple console.log that I'm printing it and here I'm writing this is asynchronous function here this is I'm writing that without a weight a step okay and then I'm saying okay please return 42 so what exactly it will do it will return a promise I'll show you I'll we will prove it that okay is it really returning a promise or not so it will return a promise which promise it will return a resolved promise here on top of 42. right so let's do one thing let's call this particular function so see I'm calling this function F1 and now this function is returning me 42 with the result promise so I'm calling this function it will giving me a result promise then can I write dot then over here yes I can write it and this function is giving me 42 as a result promise and now I can store it let's see in this particular result and then I can use it for the further purpose let's see I simply write that console dot unlock and whatever the result that you are getting it I'm just printing it over here right that's it okay so see what is happening this function is written with the async here this is not asynchronous step this is a simple normal 42 with the promise that I am returning it this is also not a asynchronous step so I don't need to write any await unnecessary here but remember one thing asynchronous function will always return I promise so let's run it I think await concept dot JS I'm running it and here you can see first it is printing like this this is async function without a weight step and whatever the 42 is coming and then we are printing it on the console perfect okay then I'm going to create let's see one async function with the error that what if a function is giving me the error so let's create one async function um without a weight but with error it means it will return me a rejected promise so what exactly I'm going to write that okay once again I'm writing async and let's see this time creating function F2 which is returning me what so let's see here this is async function here I'm writing with error a normal console.log that I'm printing it and then here I'm writing that okay you have to throw the new error here so I'm writing that okay fine through new error and that's it if with the error if you really want to supply a message that this is my error that's it okay whatever you want to supply that so this is again one async function you don't need to write any of eight because both are not the asynchronous steps is this these are just normal synchronous step that we have written here so now I'm going to call this particular F2 here like this and then what should I do here in this case so with the F2 I can directly use dot then but dot then generally we use it for the result promise so what will happen this will return what this will return a promise which promise it will return a rejected promise on top of this particular error object so I can use it with the catch block here dot catch and whatever the error message that we are getting here that I can use it and then I can print this particular console.log whatever the error that you want to print error that you can print it here right so let's quickly run this also and quickly go to the terminal and let's run the run it here so here you can see that this is printing that this is an async function with error which is actually calling the F2 first and then we are getting that the error message error is this is my error here so I'll do one thing let me just comment it out uh the F1 otherwise I don't want to call it unnecessary otherwise you won't be able to see the output properly so let's clear it and then run it again so here you can clearly see that this is printing this is an async function with error and it's printing and it's giving me the error that this is my error will be given to this particular error variable and then I'm printing it so hence proved that F2 function which is the async function and it's returning me the rejected promise here not the result promise result promise means when you return a normal value here so this is also clear now I'll do one thing that I'm going to create one async function with a promise okay so that we will clearly see the difference syntax Y is also that async function with a result or you can say a rejected a promise that I really want to write it okay so I'll do one thing let me just comment it out this F2 from here I don't want to call this now let's quickly create one simple function here let's write a function first and this function is let's see get info function this is giving me some information here right and this function say that okay fine that I'm going to return what I am going to return a promise right so I'm going to return I'm going to create the object of a promise here and let's and this is giving me resolve comma uh reject callback function these two callback function that I'm using it here right guys if you're not comfortable with the promises you cannot understand async and await properly so please go through with the result and reject promises also and let's see for example that I'm going to create one random variable and let's say I'm generating one random variable let's take a simple example here which is math.random which will generate some random number right and then I'm going to write that set timeout function to create a asynchronous step that it will do the processing let's see in one second or two seconds something like this and then I'm going to uh let's say timeout that I'm going to write and then I'm going to put a condition here that if whatever the random the number that you have captured this number so let's say I'm writing random number let's create nice variable name this random number is what if this random number is less than 0.5 then do what then I really want to call this resolve callback function here and then I really want to return something so for example let's say I really want to return 42 from here right and then I'm writing another else here that you please reject here and reject with the error so I'm writing reject error and then here I'm writing that um let's see wrong value error something like this I'm just returning this message over here perfect so this function let's see that I have returned and then after that after rejecting it I'm saying that okay the set timeout will take some time so set timeout says okay fine that it will take around 2000 milliseconds of time also here perfect so this is what a function I have written and this function is having a return promise right it depends on the random value then I'll do one thing that async function here create Asic function which is calling this get info function here right so this function I'm going to create with async keyword and then I'm going to write let's see function and let's see I'm writing that get number information or get number info function that is what I have written and then I'm saying that okay I'm going to call this get info method from here so can I call this get info method here so see this I'm going to call this get info method and this method is what this method is the asynchronous function it means this step will behave like a asynchronous step for me so in that case can I write a weight here right so I'll do one thing that I'm going to write await it means I'm going to wait for two seconds or five seconds whatever that you have returned and then you are giving me whatever the number if it is less than 0.5 it will give me 42 otherwise it will give me the error here so in that case I'm saying okay fine that I'm going to await for the get info method and once after the 2000 milliseconds are done then I'm going to store a number or whatever the result which is coming here so simple let's say I'm storing the result and then I'm just printing it on the console.console.log here that and then I'm just printing it over here right now it could be an error also so in that case if I'm getting the proper result let's see 42 then I'm getting it fine so now if I'm getting the error then we can handle it with the try catch block also so here we can write it okay fine this is actually it is giving me the normal value store it inside the try if it is giving me any error then I store it inside the catch block here and then inside the cache block whatever the error that you are getting it see this is so simple to handle the exception handling also and whatever the error that you are getting you can just print it here that okay let's print the error here right so this is what this is my async step remember this thing is this normal synchronous steps I'm not writing any update here so see this is a combination of async and await so we have created a separate method you can say it's a kind of let's see utility method which is doing something and it's a kind of asynchronous function that is what I have written or I would say this is my asynchronous function without async keyword that I have written right if you directly write it here that is also fine but sometimes let's see get info method or utility method or helper method that I have written which is returning me a promise so here which function is calling this function get number info function is calling the get info that's why using a weight over here right this for the get info so this step will be await if the number is less than 0.5 it will return 42 and it will print it if number is not less than 0.5 then it will give me the wrong value error and then it will come inside the cache block and then that's it now what we have do we just need to call this particular function so I'm just going to call the function from here so here I'm writing that a call this function how to call it just simply use the function name get info number so it will come here it will call this it will return a promise and then on the basis of that the result or error will be printed okay so let's see is it really working or not so I'll go to my terminal so let's see I'm running it clear the console so after two seconds let's see what is the number we are getting it says that okay 42 it means we got the random number which is less than 0.5 right so let's run it again next time let's see whatever see this time it says okay maybe the random number is not less than 0.5 that in that case is giving me the wrong value error then I'm printing it with the error message here you can you see the message here so instead of returning 42 can I return the exact random number that you are passing it that also I can do it here all right so let's clear the console and let's run it again first save it and run it again let's learn it again see this time is giving me the number and this number is actually less than 0.5 so whatever the number that we are getting here or we are returning here in the result same number we are printing it here so it means my I'm getting the result promise from here okay let's run it again so every time it will generate some random so 0.03 also less than 0.5 again run it so you keep running it sometimes you might get error also or sometimes you might get whatever the random number which is coming now see the fourth time or third time we are getting error it means the number is actually less than 0.5 if you really want to print that number you can print it also after this line that is also you can print it so I hope you get it here that async and await concept here we will see one more example in the next video but this is just a basic just to cover that to understand the syntax and everything how exactly async and await works so I hope the the normal steps or the notes that we have written here it is actually clear remember this thing if I'm creating of normal function so let's create another function here okay let's see the function is F3 function and inside this function if I'm writing a weight right or let's see I'm writing a weight and then I'm calling the F2 function from here so this is giving me the syntax error why a weight expression are only allowed within the async functions so that's what I have written here that okay if you are writing let's see a normal function here and I cannot write the await step here see this one I'm talking about this one so again a normal function that I have returned so this function I have to make it what I have to make it async now the error is gone from here perfect so I hope this is clear and all other examples we have already seen like this okay so that's all for this video thank you so much please subscribe to the channel and please go through all the JavaScript videos that I have prepared already on my channel there are more than 30 videos I have prepared if you go through with that your Concepts about asynchronous synchronous calls promises and various types of promises call back callback functions Arrow functions arrays functions I have covered there in a very systematic in a very easy way that will give you a lot of confidence because these concepts are slightly confusing in JavaScript and in order to cover async and await you really need to go through with the promises and the Callback thank you so much guys

Channel: Naveen AutomationLabs

Views: 3,055

Keywords: Async - Await Concept in JavaScript, async await in javascript, async await, async function, await concept, async await by naveen automation labs

Id: A9q0c4xJbkg

Length: 25min 46sec (1546 seconds)

Published: Mon Oct 02 2023