Instructor: So, we learned how to construct,
and how to consume promises.
But, this syntax to consume promises
can still be quite confusing and difficult to manage.
And, so in ES8, or ES2017, something called Async/Await
was introduced to the JavaScript language,
in order to make it a lot easier for us developers
to consume promises.
So, now let's take a look at Async/Await.
So, again, Async/Await was designed
for us to consume promises,
and not to produce them.
So, if you want to produce promises,
we just do it the way that we learned in the last lecture.
But, most of the time, we're going
to consume promises, anyway.
And, Async/Await makes that a lot easier to do.
So, without further ado,
let's see how to use it in practice.
And, what we're gonna do is basically
to change the way we consume them, in the last lecture.
So, this piece of code, and instead use Async/Await.
So, these promises that we have here, these three,
we will continue using them.
We will simply get rid of the code, here, for now,
and do the same thing with Async/Await.
Okay?
And so, we start by creating an Async function,
so use the Async keyword,
then function.
And, let's say, get recipes,
and then I'm gonna call AW for Async/Await.
Okay?
Then we can also just call it down here.
Alright.
So, this is a new special kind of function,
which simply means that this function
is an Asynchronous function.
So, one that basically keeps running in the background,
just the way that we learned before.
This Async function then returns a promise,
but more on that a bit later.
For now, what's important is that inside an Async function
we can have on or more Await expressions.
So, in order to consume our first promise,
we can do it like this.
We simply say const, IDs,
Await,
get IDs.
So, this get IDs, here, is our first promise, right?
So, get IDs, is this promise here,
and then to consume it, we simply say Await IDs,
and assign result to this IDs variable.
And, what happens here is that this Await expression, here,
will really stop the code from executing, at this point,
until the promise is fulfilled.
So, in this case, this get IDs, promise.
And, if the promise is resolved,
which remember, means that it was successful,
then the value of the Await expression
is the resolved value of the promise,
which is then assigned to this IDs variable, okay?
So, again, in this case our promise will resolve
to this value, here.
So, this array and so this IDs here
will then become the value of that resolved value.
So, that array that I just showed you.
Okay?
And, to demonstrate this to you,
let me then just simply log this to the console.
So, IDs.
Run it, and let's see it, and here we go.
So after one and a half seconds, we locked the result value
of the get IDs promise.
Okay?
And so again, what happens here,
is that we fire off the functions,
so we start the function.
And, it then keeps running asynchronously in the background.
And then, here, we wait for this promise, here, to resolve,
assign a value to this IDs variable,
and simply log it to the console.
Now, if the promise is rejected,
then an error will be thrown.
And, if you want to handle that error,
we have to include some more code here,
but that's not really important for now, at this point.
And so, I'm leaving that for the next lecture.
Okay?
So, let's now consume our other two promises.
So, this one I'm gonna call recipe.
And, we will Await the result of our next promise.
And, that one we get simply by calling get recipe,
just like this here.
Right?
So, we have our get recipe function, right?
Which is this one here.
Which will then return a promise.
And, so we Await that that promise finishes.
And, after it finishes we can then
log the recipe to the console.
(typing sound)
And, now the next one.
(mumbles) call it a related,
and Await the next one.
So, we can actually, use,
again, this code here.
(typing sound)
And, that's it.
So, let's check out it, here.
This would work the exact same way as before.
And, yeah, here we go.
So, here we have our result just like we had
when we consumed a promise in this way, here.
Okay?
And, I think that this way, here, is really a lot easier.
So, all we do is to simply Await
until each of the promises, here, gets a result.
And, in each of these lines, where we use the Await keyword,
the execution stops and we wait until the promise returns.
So, that's how Async/Await works.
It allows us to consume promises,
but without all the callbacks
that we have with the call back (mumbles),
and to some degree, also in promises,
with the den and catch methods.
Now, I just want to make it very clear, again,
that the Await expression can only be used
inside an Async function, okay?
And, this Async function, remember it runs
in the background.
And, that's very important because we can never have
the main code stopping.
And, so all we do here, is to block the code
in the Async function, which runs in the background, anyway.
Okay?
And so again, stopping the function here
is not a problem because it just runs
in the background anyway.
So, in here, in this line of code,
we synchronously call this get recipes function,
which then does all this stuff, here,
just in the background.
Now, this is all really great, already.
Now, just imagine that we actually wanted to return
the value here for this Async function.
So, let's try something, which is not going to work,
but I'm going to show you anyway.
So, let's say that we want to return the recipe.
So, we can assign, then, this return value,
here to this result, right?
And, then we can log it to the console.
Now, this is not really going to work, right?
So, let me show it to you.
So, all this logs here is this promise,
and it says pending, here,
and so that's not really the result you were looking for.
We were hoping that it would log to the console,
and result of the recipe.
So, basically, this here, right?
And so, why didn't his work?
Well, it doesn't work because this function here,
runs Asynchronously in the background.
So, by the time that we try to run this console.log, here,
this get recipe function is still running in the background.
And, so all that is logged is this promise, here,
which simply says,
well, there's a rec here.
It is a promise but we don't have any result yet,
and so we cannot log anything to the console.
Right?
Because remember that this code, here,
is of course run synchronously, right?
And, so it runs this here,
then it puts it off to the background,
and then immediately it will run this next line,
but by the time we run, this get recipes function, here,
will still be doing it's job,
and will unlock this data here,
long after this line, here, has already run.
Okay?
So, how could we actually solve this problem?
Well, remember how I told you that earlier,
that an Async function
always automatically returns a promise?
And, so if we return a value from the Async function,
using the return keyword,
so just like I did here, then the promise
will automatically be resolved
with this returned value, okay?
Now, this may sound a bit confusing,
but it's very straightforward.
So, let me just show it to you.
So, this one, here, doesn't really work,
but what we can do here, is to then simply
use the den method.
Just like we did before.
Because, again, this function, here,
automatically returns a promise
with the resolved value of recipe.
And, so we can now use this den,
in to which we pass a call back function,
where the argument is the resolved value
of the promise.
So, let's just say a recipe, here,
or resolved, it doesn't really matter.
Let's call this resolved, okay, why not?
And, then we can simply console that log,
this result to the console.
And, we can maybe add some text,
so that it's different from this one, here,
so let's use the brackets here,
then we of course, we need these curly bracelets,
is the best ever.
So, something like this.
And so now, let's test it again.
And, wait for it, and here we go.
So, fresh tomato pasta is the best ever.
And, so now it works just the way
that we wanted it to work, right?
And so, what we did here is to use den,
which is basically to consume this promise,
just like I showed you before, up here,
which is possible simply because of the fact
that this Async function, here,
always returns a promise, that we can then consume.
Okay, you will actually need to use this trick, here,
later in the big project that we're going to code.
And so, it's important that you familiarize yourself
with this piece of code,
and that you really understand,
and that it makes sense to you at this point.
Okay?
So, I hope you saw that Async/Await
makes it so much easier to work with promises.
And, that's just because of the fact that it looks like
the normal synchronous code,
that we're already used to.
It just works in an Asynchronous way, behind the scenes.
Okay?
So, again, this really looks like
Asynchronous JavaScript code,
that we've be written all the time.
We just need to understand that behind the scenes
because of this Async and Await,
this is Asynchronous code.
But, as long as we understand how and why all of this works,
we can now use this fantastic new tool, to our advantage.