[MUSIC]
>> Hi there. Christopher Harrison,
Senior Program Manager, Microsoft.
Let's take a look at how we can utilize Async/Await
to manage our asynchronous calls inside of JavaScript.
Now, one big thing we keep in mind about Async/Await is the fact
that this is built on top of Promises.
So as a result, we're going to start with
the little helper function that we had from before
that promiseTimeout that converts a Promise into Async/Await.
Which by the way means that any time
at all that you're calling a function that's
going to give you back a Promise you can
use the Async/Await syntax.
Now, Async/Await starts with an asynchronous function.
I'm going to say, "async function",
and we'll give this name of, "run", in my case.
Then now, I'm going to go ahead and put in my logic here.
Now, one big thing to keep in mind about
the way that JavaScript works is
I'm not able to use Await unless
I'm inside of an asynchronous function.
As such, what I need to do,
is I need to create that function and then go
ahead and call it there that I'm not
allowed to just simply say, await,
and then promiseTimeout, that unfortunately,
that syntax is not going to work here.
All right. Now, the way that Await is going to work is it's
going to, logically, block execution, if you will,
but still, actually, allow the thread to be
used by something else behind the scenes.
While our code running, if you will,
is going to look like it's stopping behind the scenes,
it's actually still able to do
other things if that's what needs to happen.
I'm going to say, "await", and then let's say, "promiseTimeout",
and let's say, "1000".
Actually, I'm going do, "2000". There we go.
I'm going to just say, right up up here, "console.log('Start!!')",
and then "console.log", and then "('Stop!!')".
Cool. Now, when I run this,
what's going to happen is,
it's going to print out that
"Start!!" the pause, and then "Stop!!".
Even though it looks like all
three of these lines of code are just, boom, boom, boom.
You're going to notice that it's going to pause and
wait for the execution to take place.
Again, it's just pausing here behind the scenes,
other things could potentially be happening.
Now, one of the big things about JavaScript,
and there are certain tools that can
help you catch things like this,
is it's possible for me to call
a function that's going to return a Promise
without putting in an Await.
When I do that, you notice that I get different behavior here.
Let me go ahead and just add in a real quick console.log.
No, it's not really going to behave
the way that I want it to, that's all right.
Let me rerun this.
Let's keep an eye on what's happening.
Now, what you're going to notice is,
I've got my "Start!!" here,
I've got my "Stop!!" there.
Now, when had the Await right there,
let me make sure I save this, and I ran this,
you'll notice "Start!!" and then "Stop!!".
Without this Await what you're going to notice big change here,
is the fact that it's going to go, "Start!!",
"Stop!!", then the pause afterwards.
The reason is because I didn't pause the execution if you will.
I did not put in that Await right here,
which is going to be required.
If you're ever getting
unusual behavior or you're getting error messages
about an expected return value
not being what you expected it to be,
quite frequently, it's because you missed an Await.
Keep that in mind, whenever you're working with Promises
always, always, always, make sure,
if you're using Async/Await to use that Await.
As another example here,
let me go ahead and say,
"async function longRunningOperation".
Let's just pretend, if you will,
that that was going to go call a server or do
something long running, my logic here.
In our case, I'm just simply going to say, "return" and then "42;".
Now, I can go grab that value by
saying, "const response = await",
and then that "longRunningOperation".
Then if I say, "console.log",
and then the "(response)",
what you'll notice is that it's going to print out the number 42.
The reason for that is because it's going to go run that,
wait for the Promise to complete,
which will have happened
instantaneously because we just return the number 42,
and then give me access to that value.
If we don't do that,
if we don't have that Await,
note the difference here.
Let me just put a couple of returns here.
If I rerun this, now, what you're going to
notice down here is that I'm going to get, "Start!!".
Let's make sure I save this.
There we go. Try this one more time.
Let me run this one more time.
"Start!!" and then you'll notice
that it's going to give me back this Promise 42.
The reason that it's doing that,
is because I don't have that Await.
The reason that it worked that first
time was just because I hadn't
saved the file so the Await was still there.
If you're ever seeing that behavior,
it's going to be because you forgot to put in Await.
Now, what I really like about
using Async/Await is that this feels more
natural to me than using then for managing our Promises.
You're also going to notice that, really, going forward,
this is going to continue to become more common,
not only just inside of JavaScript,
but also, in other programming languages.
That is how we can utilize Async/Await
for managing Promises inside of JavaScript.