Preview
Video Player
00:00
00:00
Refactor Using Async/Await
3:34An example of using async/await syntax to handle asynchronous tasks in Express.
Async await is basically a way to work
with promises using a generally less
0:00
verbose syntax, that looks a lot
like using synchronous functions.
0:04
Using async and
0:08
await, we can write express routes that
are even more straight forward to follow.
0:09
Another benefit of async await
syntax is that it's easier to debug.
0:13
When an error occurs in
a massive chain of events,
0:17
it can be difficult to pinpoint
exactly where the error occurred.
0:21
With Async away,
0:25
it's much easier to tell on which line
an error was thrown, because the syntax
0:26
instructor of your code is a lot like
using standard synchronous functions.
0:31
Let's see what this looks like.
0:35
Copy and paste the get route,
and delete what's inside.
0:36
And let's comment out the previous route.
0:44
You can leave the getUsers function as is,
and I'll talk about why in a moment.
0:47
Let's first refactor the express route and
then talk about what's going on with it.
0:53
First, the keyword await must always be
used inside of an asynchronous function.
0:56
That means that we need to convert the
getRoutes callback function to a promise.
1:02
So how do we do that?
1:07
We can simply add the keyword async in
front of the getRoutes callback function.
1:08
When we do this, JavaScript will
basically look at this function and
1:14
if it's not a promise,
it will wrap it in one.
1:18
Now we can use the await
keyword inside this function.
1:20
I'm going to call getUsers
with the await keyword.
1:24
And I'm going to store the value
that getUsers returns to a variable.
1:30
Now I'll paste in the code that renders
the information to an HTML page.
1:37
So I'll just copy and
paste that from up here.
1:42
And we don't need to change
the getUsers function in any way,
1:47
because it's already returning a promise.
1:50
The await keyword can be used with
any function that returns a promise.
1:53
When we use the keyword await,
we're essentially saying wait for
1:57
this asynchronous function to finish
before moving on to the next line of code.
2:01
It's just a different way to do the same
thing that a call to a promises then
2:07
method does.
2:11
We're ensuring that this next line of code
2:12
won't execute until we
have our user's info.
2:15
Now what about if there's an error?
2:19
To handle errors we'll need to wrap
this code in a try catch block.
2:20
So the code we've written so
far goes inside a of try block.
2:24
And in a catch block we can catch any
errors and render the error page.
2:35
Let's open up the browser and
make sure that this is working.
2:48
And great, that's working as we'd expect.
2:53
The beauty of async await is that I
can now perform as many asynchronous
2:55
actions as I want, and I can write
them just like synchronous functions.
3:00
So if I had another asynchronous action,
3:05
Might look something like that.
3:14
But as you can see, because of
the necessity of the try catch block for
3:16
error handling,
we're getting a little verbose again.
3:20
The good news is, is that there are ways
to abstract away the try catch block,
3:23
either manually or by using a library.
3:27
We'll spend the rest of this course
exploring an example of how to do
3:30
it manually.
3:33