Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Asynchronous Code in Express!
You have completed Asynchronous Code in Express!
Preview
An example of using callbacks to handle asynchronous tasks in Express.
Example of a callback with performing two asynchronous operations:
app.get('/:id', (req, res) => {
getUser(req.params.id, (err, user)=>{
if(err){
res.render('error', {error: err});
} else {
getFollowers(user, (err, followers) =>{
if(err){
res.render('error', {error: err});
} else {
res.render('profile', {title: "Profile Page", user: user, followers: followers});
}
});
}
});
});
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up