[MUSIC].
>> Hi, there. I'm Christopher Harrison,
Senior Program Manager inside of Microsoft Cloud and AI.
What I want to take a look at in this section is
the concept of asynchronous programming and promises.
Now, when we about modern applications,
modern applications are frequently going to be
utilizing services that are external to our app.
Maybe because we're reading from the file system,
we're making REST calls,
calling out to a database,
or maybe we just have a long running operation.
All of these things can take a little while.
The challenge that we have with an operation
that takes a long while is the fact
that typically we're only going to have access to a single thread.
If a single thread is waiting for something to happen,
nothing else is going to be able to take place,
and so our application could appear frozen
or we could just simply have performance issues.
What we want to be able to do
is to basically say," Hey, you know what?
This is going to take a little while,
do your thing, and then when it's done, call me back."
In fact, that's actually the way that
JavaScript initially handled this,
is through the magic of a callback,
and it behaves exactly like that,
that something is going to take
a little while and then when it completes,
it's going to call me back.
The way that it will call me back is
by calling a function that we give it.
Now on my case,
I created a named function,
but we could also use an anonymous one.
We'll see that on the next slide.
You'll notice in our example here, we're using setTimeout,
which is going to set up a delay,
and with setTimeout, it's going to go,
"Hey, tell me what you want me to do.
Give me the callback when the timeout completes."
The timeout is going to be measured in milliseconds,
so this would wait three seconds and then call callback,
which would then print timeout completed.
Now, the challenge with callbacks is
it's quite common in an application to need to be
able to do multiple things that maybe I need to make a call to
a REST service and then to a database and then to another service.
If we're waiting for all of those different things to take place,
our code then winds up getting tabbed in with a callback and,
another callback, and another callback.
While this solution works, it's not ideal.
This is where promises come into play.
Promises are actually a common development pattern
and like the name implies,
a Promise is going to be, well, a promise,
that it's going to promise me that when the code completes,
it will then let me know and give
me access to whatever the result happened to be,
or just give me the opportunity to
start now running some additional code.
Now Promises are relatively new to JavaScript,
but you are going to notice that most recent versions will
have a Promise object built in that you can take advantage of.
Let's take a look at the syntax for a Promise here.
Now, there's a lot of code on this slide,
I know, but let's go ahead and start to break it down.
The first thing that I want you to notice is
we're going to create a Promise object.
The way that a Promise object is going to
work is it's going to accept a call back.
It's going to accept a function
that is going to have both a resolve and a reject.
Now, inside of this function will be
whatever logic it is that we want,
and our obligation here is to call
resolve whenever the operations exceeds or make sure
that something does call resolve and then reject
when the operation fails or if the operation fails.
In our case, we're going to use setTimeout
and we can actually just pass in resolve there.
When the timeout completes,
it will automatically call resolve,
automatically indicating that everything has succeeded.
How can we then use this?
Well, if you take a look down below,
we're now going to call that promiseTimeout.
It's going to give us back the promise
because that's what we returned back.
We'll be able to call then,
then is going to be executed on success or on resolve.
Now I can have whatever syntax it is that I might want here.
Now, what you're also going to notice is
that if we don't need a full Promise object,
there's actually a little shortcut called Promise.resolve,
where we can then pass in a value to go," Hey,
we've completed and this is now going
to be passed on to the next handler."
You'll notice that we can actually string together
handlers from then on.
My next handler there is going to be
called when the prior then completes,
and we'll even be able to access that response.
That response happens to be 42.
We're going to be able to access that and print that out.
Now, what happens if something fails?
What happens if there is a reject?
Well, if there is a reject,
that's what we have catch for,
and so catch will catch that reject.
Now, again, I know that there's an awful lot
of moving parts that are there on that slide.
Let's get in and take a look at the code in
action and help bring all of this
together so that way you can see how promises work
and way you're going to use them inside of JavaScript.