Welcome back, ladies and gentlemen.
Today, we're going to talk about S8 Async, a feature, and this is one of the most important, important
features and this is built on top of the promises.
So that's why we need to learn about the promises before that, that so we can understand wasting away.
Now, last time I talk about other estate features like this, but because there was no time to do it
in one lecture today, we're going to continue with S8.
So create lecture seven and link it in your index file.
OK, make sure that this is up and running, working as you choose.
Nice.
So what is async await.
Well, let's talk about an async function.
So what is async function?
You should remember it like this amazing function always returns a promise.
So when a function returns a promise, then we need to deal with with that promise.
Okay.
Now let me first create a couple of examples and everything will be clear for you.
So I'm going to create first a normal function the way we did before.
So function hello one.
And it will not take any parameters and it will only just return.
We're not going to cancel a lot, but we're going to return.
Hello here.
OK, now.
How we are going to say cancel that log and we're going to say normal function.
And that will be hello, Juan, this is how we call it function, and now I should get the output.
Hello, normal function.
Hello.
Very good.
So this is the output so we know how to do this.
Now let's create amazing function.
So what is async function?
So in order to create an async function, you need to have the key word async before before the function.
So function again.
And I'm just going to use the helo here because I use Hillo one.
I want you to have the both examples.
That's why I don't want to comment on this.
So not take any parameters and let's say return hello again.
OK, now you're not going to see any change in the outcome here because we need to cancel, lock the
async function.
So how are we going to do this?
Let's just say async here function.
And and let's call it hello here, just like this, so remember I told you that you should remember
that async function always return a promise in this promise is fulfilled.
So it can be in a couple of stages, right.
Where we need promises.
He wishes it can be pendent, fulfilled and rejected.
Now, if you haven't done this lecture for just please go back and do it because you're not going to
be able to understand.
Now, this is what the async function does.
It returns a promise.
Now, sometimes we need the value and we will see how we can do it.
That and the promise can be rejected or fulfilled.
Right now, this is one of the features.
So we just look at the async part, what we will do it later in async going now other ways.
And you will probably see this in in other tutorials or the place that you started working.
So you will see that we can just use async function on our functions like function expression.
So let me just do this.
Convert.
I'm just going to say here, convert to async function expression, right?
I just want to go through all of this so you will be understand.
So I'm going to see you here.
Let hello.
And I'm going to put it to here and I'm going to say async function.
So remember, we always need to use this async key word and this should return.
Let's say hello to.
OK, now this is how we are doing it in a function expression, right?
So here we do have hello and everything that everything else is pretty much the same as this point.
OK, but this is a function expression in console that log.
Function expression, let's do it, async, function, expression, very good.
And let's put it here.
Hello, two.
Very good.
And I'm missing something here.
I'm missing comma.
Get this is async function expression.
OK, well, we can use an arrow function as well and we can do them asynchronously.
So let's do it here.
Async.
Arrow functions, so I'm just going to let Halo three, there are a lot of hello's function, but I
just want all of them these to be accessible to you.
I don't want to just to consulate it.
I mean, to come in and out so you will not be able to see what's happening.
So async the keyword will not take any parameters.
And now we need to create Yero function.
OK, so how are we going to do so our function then.
We're going to do return.
Hello.
I don't need anything else because I'm returning the single line.
Even without this, it will work.
Hello three.
Save it, so console that log async arrow function and let's do Halo three.
There you go, it will return another promise with us, but you don't need to worry about it now.
You know how to create now async functions.
You know how to create a normal async function.
You know how to create function expression.
You know how to do it with erro functions.
OK, but how are we going to consume the promises?
Now, this is a new keyword for you, can't you?
The promise.
OK, so I'm going to talk about the these to the async, so I'm going to just say hello.
Let's start with three.
So this is how we are going to use because I've already stored them in a variable.
Right.
So let Halo three hold back the promise that this return.
OK, so I can change that then on that variable so that then and now inside I can say here, OK, I
will have value and I will cancel out.
What.
The value now, what will the value will be, OK?
Here it is, the value of this hallowed reheats will be just below three, right?
Save it.
And Halo three is not a function, right?
Why?
Well, because we need to use this curly brackets here.
There you go.
Now you have the result, Halo three here that we are returning now.
You know how to consumer promise, but this can be even shorter, right?
So I'm going to do it on hello to.
We can do it on Halo three, but I want that to stay with you, so then in here I can just comment about
the value or I'm just going to say console that long and it will work.
Hello to right.
And why this is not space.
God knows.
OK, now it looks better.
So we can also do it in one line.
How cool is this.
OK, shall we have done the E in keyword the first part of this async away.
But we can also use the wait keyword and if we want to use the wait keyword and you will see the difference,
we need the function to be async so we cannot use the wait without these async.
OK, that you should know because you don't want to try something.
And yeah, we will not work without the async function.
So let's create a function called hello for in that function will return a greeting.
OK, so async function.
Let me just do it here.
I'll wait.
Await key word where we get so async just to tell the JavaScript that this is a function hello for cool.
Now let's do it like this.
It will return a greeting here and that greeting will be a wait promise that resolve, not reject resolve
here.
We will pass our wait.
Hello.
Good.
Now, all we need to do is to consume this promise.
So if I do hear if I copied this one and put it here pasted, oops and enter.
And if I do, hello for.
It will return a promise back to us just same as before, but now we are going to consume it and I will
say hello for that then.
And I'm going to say comes a lot and they should give us a way.
Hello.
OK, what's happening here?
So we can use a wait before any promise here.
That will await the decision, what will we do, it will make the function to wait until this promise
is resolved or fulfilled.
So that is what is happening in short.
So when we have the await key word, the whole function will stop.
So it will wait until this promise.
It will wait until this promise is resolved and then the execution will return back to normal.
OK, so that is why we need a single wait.
And the reason why you want to implement a single word in your code is because it allows us to write
code that looks and executed asynchronously without blocking the threat.
OK, so let me give you one more example, probably more examples than one, but so we can practice
more on a single week so you can see what's happening.
So before we did a page function, let me just write this page function again.
Let's put a comma here and say fetch function.
So after that, we're going to rewrite this fetch function using a async awake.
So I'm going to say fetch here and remember Jason Placeholder just type here, Jassam Placeholder.
And we're going to grab what?
The let's grab the users.
Copy this one URL, so the fetch required one URL here where we can have the users right and we can
change change that, then here responds.
Then response.
Jason, and we have already done this, I'm not going to explain again, so here I'm going to say data
and I'm just going to Conjola the data.
Right.
This should be outside here and our Fed should work.
Let me let's see what's happening here.
There you go.
I have 10 users because we have 10 users here.
You see, the last one had the idea of 10.
Good, very good.
We do have the result outputted here.
Nice, so how we can turn this one to async 08.
OK, so how we can do this async, I'm going to create a function called Thach users.
Users.
And now let me just write it real quick for you, and after that we can discuss what's happening here.
So here I'm going to say a wait fetch.
And why I say I would fetch.
Well, let's copy this whole thing, because this fetch, remember returns as a promise and we can await
any promise that we want.
Now, look at here how easier it will be for us.
So I'm going to store this promise back to our response or just read resp.
Look, here, doesn't matter if let's just go here.
Right.
So what I did is I story a week.
Right.
Or this promise back to Constance called response.
Now what I can do is I can say const data equal another wait.
Oops.
Now this is a tricky part and you will understand real quick that Jason.
Very good.
And now I'm just going to console lock the data.
Now, this is an example that you should understand.
So last part, we need to users that users and that's it.
We need to call it this function that we created.
And is async function, by the way.
OK, save it.
Let's see if we have any problems here.
No, we don't have any problem.
So this was coming from console.
What's it like this which.
Very good.
So we have fetch and this is the async away just to know what what what is coming from where, OK,
now we have the same same results here.
I'm not going to show it to you.
You can, by the way, check them.
So what's happening here?
Let me just make this a little bit bigger.
So we have a function that is a function that is the first thing that we we need to do.
So we use the async keyword in order to tell that this function will be async, await function.
Now, we used async.
I'm sorry we used a wait before.
We are fetching y.
Well I already explained because a wait can be used before any promise.
So this function will pass until this response.
Right.
Until this response from this fetch is received.
Do you get it now.
So we are making the function to await and we are saying, OK, hang in there until we get this response.
So so we need to wait for this response to return and we can store it in a variable called response.
Nice.
But why do we need another overweighed here?
So, well, remember that.
We don't get the values straight away.
From the response, we don't get the value, so what we are getting a promise back, this will return
another promise response that Jason is returning, another promise.
In each time that we have a promise, we can say, OK, I'll wait before that promise in.
The function wait until you resolve this promise, so that is how it works now.
That's why we do have to wait here, because this returns a promise and this also returns a promise.
So and each promise, we can say, OK, I will use a wait to wait until the promise is fulfilled.
And after that, we just can't the data and we do the same to you.
We stored that promise, resolves, rejected, whatever it is in this data.
So after that we can use we can just consolo the data.
Right.
So this is a step by step and the court looks Synchronoss now see in steps first we saying, OK, before
doing this second step, wait until this promise is resolved, then these promises are resolved.
Then you go on this line.
How cool and powerful is this?
Now, we will do one more example and remember that we did promises that old last time.
So we use the method to loop through that array of Eurorail links.
So the real, real, real links.
Let's just create here, Jason, again, another one.
So this will be another example here.
Let's create an array in this area will have three you else and the you are alse will be just going
to copy it here.
So first will be the users.
The second Eurorail will be for posts
in the third your will be for Wab's.
Make sure that you put it, you put it in the quotes, OK, because it's not going to work otherwise.
So the last few URL, we will just get the albums or you can go here and you can try for anything that
you want you can do for photos.
It's too much post.
So I just choose both albums and users.
Users are having only 10, but everything else is one hundred and one hundred.
Nice.
So we create that this list and we use promise that OK, so how we did it, let's just write it together
or we don't need to write it.
We need to go.
I think we'll for lecture four so you can go to lecture four in, copy all of it.
Very good.
And paste it down here so it will work.
Yep.
Same name.
Save it.
Let's go back to your hour and there you go.
I do have all of this let me just show you so I have 10 users.
Was it like this they don't want so here what we can see.
Users, comma, OK.
Because I want to know which what is the data we are just bringing out there, so this will be posts.
And make sure that you get rid of this space and this should be albums, save it now.
Go back in your.
There you go.
Now you have the albums post and the users COO.
And now what we can do is we can rewrite these promises that all using async a way.
OK, so how are we going to do this?
Well, let me just first coming out this one, because I don't want to have multiple outputs, but let's
do it.
So promise that I was using this list here and we are mapping through each and every element of this
list.
And actually there are three and we we're getting three promises back.
Right.
And we can access those three promises using data zero, data one, data two, because we were patching
each individual array and we are just getting response, response to Jason.
OK, now let's compare this one.
All right.
Rewrite this using async.
Oh.
OK, so let's create a function expression here.
Const get Jaeson data.
Let's or just get get data that will be easier.
So async here I'm going to say async function and there the rest is history.
Now we need to call this function at the end.
OK, get data, we need to invoke this function.
That's another keyword that you should remember and get used to it.
Now here we cannot wait for all of these promises so we can use a wait before this promise because they
didn't do it returns us three promises because it loops three times through these URLs.
OK, so what we can do, we can say a wait promise that all in each side here we had the Jason list
and we were mapping through each individual individual URL.
Right.
Let me just do it now, are we going to see a return here, fetch?
The URL.
And then.
Response.
Or let's use the same same here response, same wording that we did here in response.
That Jason, very good.
Now, there you go, we have it, the complete function here, so I have some small problem.
So, Jason Mapp, you are all very good.
I don't need this one here.
Yeah.
Or I need that one.
OK, so that your.
So I need one more here.
Nice, so we await all of the promises and they were look three times using this list, but we need
to stop him.
And here we use data where we use every tool to access this, to access the data.
Right.
But here we are going to use a restructuring in how this is destruction was working was really nice.
So we can create an array, see here, cost users posts and albums.
OK, and that should be equal to a weight problem, is that all nice?
So what we do is we create three separate arrays called users, const users, composed and concept albums.
But we did it with the structuring.
Right.
And that was the sixth feature.
Now, how we can access them?
Well, that's easy from here.
We can just say cancel that log and let's put it here, users.
Users straight away, we don't need to use any zero one three, right?
And this will be posts so we can access the posts the entire day because the result of this promise
will be stored here in albums.
Albums here, OK?
Here I do have albums.
Now, I do have everything right, I save it now let's go back here and there you go.
So this is a little bit different.
I put it here semicolon because I want to be different, but I already cancelled that log.
So these are from the new async away function.
So, ladies and gentlemen, I know how to create these async away, how you can rewrite the actual functions
that we did before using the easy going.
And we can wait before any promise.
So this is not the whole deal here.
I'm just.
Remember here we did catch the error.
But here we are not catching the air, so how we are going to do that in async function, well, interesting
function.
We have access to something that is called try and catch.
Now, I'm just going to cut this one from here and I'm going to say it like this.
Then I'm going to say try.
And so what actually we are seeing is try this piece of code here in this trial block will always get
be executed no matter what.
So the the compiler will get here no matter what.
So the tribe will always be executed.
Now, if we have any errors, then we can use catch.
And we need error here, or you can just that the whole thing error and conjola error and we can just
comes along the error, the complete oops.
OK, save it.
So there you go, now you know how to catch the errors as well as using the async function, but we
feel that we need to use try and catch a block.
That's how it's called.
So d try saying, OK, try this piece of code.
But if there is any error, then you're going to catch it here.
Now we have the same output.
Well let's see if this is working.
So change or modify the user's double s.
And there you go, we have the users will be there or.
Yep, air, not name resolved type feel to fetch.
OK, so we have the air there and we have the type error failed to fetch, OK, because I changed the
URL.
Where we accessing here?
Same thing can happen to Jason Placeholders, for example, for the last one.
And it will say error failed to fetch and we can change.
Something happened.
Fix me.
OK, now here is error, something happened, fix me and the type of error is failed to fetch because
this URL that we just passed here, it's not working.
Ladies and gentlemen, I know everything about the async await function.
So we use the two key words called async await.
And we can do it async single on any function that we did before error functions.
We can turn it back to async.
Oh, wait, we can do the function expression as well.
And yes, this is how you consume diploma's.
This is the way the keyword.
So again, the key word is actually we saying, OK, stop everything, make the functions to wait.
We are saying just hang in there until we have the promise resolved in return something back to us and
we can store that one here in the variable.
This is a short version.
So you can just cancel a lot here.
Now we created to recreate the FEG function using async await.
This is how it look, how nice it is.
But some some times when you start working on this you will say, yeah, it doesn't look doesn't look
simpler than this.
Well if you get used to it, yes it does.
So it looks step by step and it looks our kocho is very synchronous, not asynchronous.
So fetch users here.
We just calling this function and the last thing we did is we use from is that all example from the
lecture for and we rewrite it using the async await.
Now you will have some exercises, please do them because in those exercise you will learn how to take
this into a new level because here we can use something else.
What is this fetch is doing is actually returning on a promise so we can also do another async.
OK, but for that thing you need to look at the exercise and we need to change a couple of things here
in order for that to work.
But if you don't know how to do it, then you will see it in your solutions.
So stay stay with me and I will see you in your in the next lecture.