Here you can see once again, I open my Visual Studio Code editor and my Chrome browser, and I already
create an async function named test, which is empty.
So first I'm going to print a statement outside the function.
Console.log.
Inside the parentheses one colon message.
It's mean.
This is our first message.
Here we are going to understand how await function worked.
And I'm going to copy this same message and paste it inside the async function.
And I'm going to duplicate it two times.
And also I'm going to change their ID to three and four.
So first it's going to print our message one statement.
Then it's going to call our function test which is a async function.
Then it print our three statements inside the async function.
And once again I'm going to print in our console another message message five.
If I save this file you can see in my console it prints all the messages serially.
Messi's one.
Messi's two.
Messi's three.
Messi's four.
Messi's five.
From 2 to 4.
They are all from async function.
And now I'm going to type await method before the message.
Three I already told you what is the meaning of await.
Wait and complete the job until this work is done.
Complete our another work.
Then it's return to our await function and check.
Is it finished or not?
If finished then it print Messi's four.
So I'm going to save this file once again.
And you can see it's changed our sequence.
You can see first it print Messi's one.
Then I call our function test which is a async function.
So it print his first statement two.
Then it print await message main message three.
But I also declare our function to wait as long as it is waiting, the message outside the test function
will be printed.
So after three it's print five, not four.
As soon as the job is done, it came back again to check.
Is it work properly or not?
If it works properly then print Messi's four.
So in that way our await method work in our async function.
If we try to run await method without async function, then it's return error.
And now I'm going to show you what is the actual use of await method, where and why we use await method.
Whenever we try to face data from the server, then we need to use await method.
So here I'm going to use fetch method and we learn about it in our previous video.
And here I'm going to fetch a Json data.
And I already created Json file in my current working directory.
Let me show you here you can see I create a folder named contain.
And inside this folder you can see a Json file named student dot Json.
And we have three records in our file name age and city.
It's a Json format.
Also, you can retrieve fake Json data from website basically for testing purpose.
So let's back to the index.html file.
And now I'm going to use the fetch method.
So first I'm going to create a variable.
And I'm going to remove this line const response equal to fetch.
And insert the fetch method.
I'm going to pass my URL content slash student dot Json.
So before this face function I'm going to use our method await its mean.
I told my function to wait and fetch the complete data from our Json file until the process complete.
It's run our next codes.
As soon as all work is over.
It's written to the await function and continue with next lines.
We know our fetch method return a promise.
So I'm going to create a variable.
But first I'm going to remove this line.
Const student equal to.
And once again I'm going to use await method response dot Json.
And we learn about it in our previous video.
Basically our fetch method returned Json or text format.
So in response we get Json file.
So we need to use dot Json.
And I'm going to return all the data which I retrieved from the Json file.
Return student and return student value.
And we know our async function return a promise.
So first is going to print message one.
And then it going to run my function test.
It's a async function.
So it's going to print message to.
After that we are asking to wait here.
After our first await function I'm going to print another message.
Message three and also I'm going to create a variable for our function call.
Let x equal to test.
And I want to print this response in our console.
So I'm going to type console dot log inside the round braces x.
Let's save the code.
You can see in my console.
As you can see first it print matches one.
And then we call our function test.
So it's print masses too.
And then I told it to wait.
Here I am going to fetch data from server.
So it's jump out of this function and started working on masses for.
So you can see in my console section it prints four after two.
And when masses four is complete we call our x variable.
So it's going back to the async function.
And it gets a response from server.
And you can see it print our response as a promise.
And you can see we have two array in our promise.
And our promise state is fulfilled.
After complete the promise section then it print our message.
Three in that way we use async and await method with our fetch function.
And now I'm going to remove all the extra messages.
So I'm going to remove all the console section.
Now it's looking pretty simple.
First we run await function for our fetch content.
It will keep waiting until the data comes from the server.
And we told our response to wait once again.
So I use another await method.
Then we return our result.
If I save this file, you can see in my console.
As a result, we get a promise and we have two array in our promise because in our Json file we have
two result.
And as you know we can use then and catch function with promise method.
So first I'm going to remove the console section.
And also I'm going to remove this variable x.
So first we call our test function.
If it return promise successfully then we are going to use then function.
And insert the then function, I'm going to create an arrow function.
And also I'm going to create cash method.
After that dot cash inside the parentheses I'm going to create another arrow function.
If there is an error in our function then automatically it run catch function.
And now I'm going to save student record in a variable.
And our variable name is r e s.
Data means response data.
And I'm going to print this value in our console console dot log r e s data.
And if there is an error in our code our catch method going to print another message error message.
So I'm going to create another variable error inside the error function I'm going to print console dot
log error.
So first we called our async function test.
And it return a promise.
If promise is fulfilled then it run then function.
And if there is an error in our function, it automatically run catch function.
And if I save this file you can see in my console it returns an array.
And if I open this array you can see it provides Json object.
And if I change file path.
So I'm going to remove S from student and save this file.
You can see in my console it print an error for zero four means file not found.
So it run our catch method and print the error.
Now let's see how we can convert so many lines in a one line.
I just want to make it one liner.
So first I'm going to comment out all this line.
Mainly we are focused on fetch and await method.
So I'm going to return inside the parentheses I'm going to call await method.
And I want to return Json format.
So I use dot Json function.
So we make it one liner.
If I save this file you can see in my console.
Similarly it returns an array and we have two Json object inside this array.
So here you can see I convert three line of code into a one line.
Let's talk about our last topic error handling.
Basically we handle our error using catch function.
There is a drawback using catch function.
When we call test function every time we need to use catch method to handle the error.
So I don't want to use every time.
So there is a shortcut to handle it.
So I'm going to uncomment all the lines and comment out this return section.
Basically we use try or catch to handle this error.
So inside the async function we use try or catch block.
In our next video, we will learn more about try or catch inside the try block.
We type our whole code.
So I'm going to move this code inside the try block.
It's mean.
We are trying this code.
If it worked properly then it return and we can access this in our then function.
And if there is an error in this try block then it's automatically run catch block.
And inside the catch block we print our error.
So I'm going to move this error message in this block.
And I'm going to remove the catch method.
And also we need to declare the error variable inside the error block.
So whenever we call test function then we don't need to type catch method to handle the error.
And if I save this file you can see in my console we can access our data successfully.
And if I create an error inside my function.
So I'm going to change the response.
Spelling is double to poncey.
And you can see there is no variable name.
Rest 22 pawns and we know it's going to return an error.
In that case it will run our catch block.
And if I save this file you can see an error in my console it print reference error rest 22 pawns is
not defined at test, because we do not define this variable in our function and also it print another
message undefined.
So you can see how we can handle error using try or catch block.
It is pretty similar with try except condition in Python.
If there is an error in our try block, then it automatically jump to the catch block and it print our
error message.
And I'm going to resolve this problem and save this file once again.
And now it's worked pretty fine.
If you want to print this result in your document section you can you can use for loop for that.
So I hope now it's clear for you what is async and await method and how we can use it with our fetch
method.
Thanks for watching this video.
See you soon!