Preview
Video Player
00:00
00:00
Using Callbacks
5:00An example of using callbacks to handle asynchronous tasks in Express.
Let's begin by walking through the example
code we'll be using throughout the course,
0:00
and seeing how we can write
an express route using callbacks.
0:04
To follow along with me, download the
project files from the link on this page
0:07
and open them in your
preferred text editor.
0:11
We'll be using a very simple Express
application that retrieves information
0:13
about users from a JSON file and
renders it into a main index template.
0:17
Or if there's an error,
and error template.
0:23
Here's what that looks like in
the browser, and when there's an error.
0:26
Open up the app.js file.
0:31
Inside, you'll see all the trappings
of a basic Express application,
0:33
a function called getUsers,
and an empty Express route.
0:37
Let's talk about the getUsers function.
0:41
Later we'll re-factor this function so we
can use it with promises and async await.
0:43
But right now it's meant
to work with callbacks.
0:48
Don't worry about 100%
understanding what it is doing.
0:50
The important part is that it retrieves
data from this data.json file for us.
0:53
Notice that the getUsers function
takes a callback function.
0:58
Once getUsers have retrieved
the data from the file,
1:02
it returns a call to this
callback function and
1:05
passes to that callback the data
it's retrieved from the file.
1:08
Here, we're storing the data
in a variable called users
1:12
which we're then passing to the callback.
1:16
So we're saying dat.users, once you're
done retrieving the users from the file,
1:18
call whatever function we pass to you, and
pass the list of users into that function.
1:24
This means that when we call
to getUsers from a function
1:29
we can paste in an anonymous function
that will access to our user data.
1:32
And we'll be able to work with that
user data inside that function,
1:36
let's see how this works.
1:40
We'll use the get user's function
inside of our Express route.
1:41
Async method is a node
that accepts callbacks,
1:46
follow a pattern of passing an error as
the first argument when an error occurs.
1:49
Let's pass get users an anonymous
function remembering to define error and
1:54
users as parameters.
1:58
If there is an error,
2:03
we'll render the error page passing
the error to the error template.
2:05
If we look at the air template,
we can see that it references
2:16
the variable error,
Which is why we're calling it error here.
2:21
Else, if everything goes as expected
we'll render the index page.
2:29
Let's also give the template a title.
2:38
Last, we'll need to provide
the template our user data.
2:46
If we look at the index page,
it references users, so
2:50
that's what we'll name the property.
2:52
And for
the value we'll reference users.users.
2:57
Remember, here users represents the data
that get users has retrieved and
3:01
passed to us via this callback function.
3:06
If we take a look at data.json again,
you'll see we need to drill down a little
3:10
farther to access the user's array,
through the property users.
3:14
Hence, the information we're looking for
is available via users.users.
3:18
Let's save and test this out.
3:24
Open your terminal, if you're using
VS Code, you can open a terminal right in
3:27
your text editor using the shortcut Ctrl+`
or choosing Terminal > New Terminal.
3:30
Don't forget to run npm install to install
the project dependencies first, and
3:37
type npm start to start up the server.
3:41
My server is already running, so that's
fine, let's look at this in a browser.
3:44
And you should see all the user
data displayed in the template.
3:50
You might be saying,
well, this seems fine.
3:54
It's only a few lines of code,
what's the big deal?
3:56
Let's take a look at an example of
what this approach might look like
3:59
if we wanted to perform
more asynchronous actions.
4:02
Say we wanted to find a specific user and
4:05
then find that user's followers,
perhaps for a social media app.
4:08
We won't actually write this function, but
4:12
here's an example of
what it might look like.
4:14
As you can see we're only
performing two actions.
4:18
And things are already starting
to get messy, with functions,
4:22
nested in functions, and
repetitive error handling.
4:25
This is affectionately known
in the JavaScript community
4:29
as the pyramid of doom or callback hell.
4:31
A lot of these nesting issues
were solved by promises, and
4:34
improved upon even further
with async await syntax.
4:37
I'll go ahead and delete this route as
we won't be using it in the course, but
4:41
you can find this code in
the teacher's notes of this video.
4:44
Also be sure to check the teacher's
notes of each video going forward
4:47
to see this code example refactored
using promises and async await.
4:51
In the next video,
we will refactor this code using promises.
4:55