Preview
Video Player
00:00
00:00
Managing Nested Callbacks
2:59Each callback adds a level of nesting, and when you have lots of callbacks, the code could get complicated quickly.
You may have noticed a pattern that's
starting to emerge in our code.
0:00
For instance, the getJSON function
has a callback in its body,
0:03
which then executes a callback path to it.
0:08
Then, that function
produces another callback,
0:11
which invokes a function that calls yet
another callback.
0:14
Each callback adds a level of nesting.
0:17
And when you have lots of callbacks,
the code could get complicated quickly.
0:20
This is a small app.
0:24
Now imagine a much larger app where we may
have to do even more things sequentially,
0:25
like have other async tasks that
are dependent on our previous task.
0:30
The nesting isn't too difficult to follow
in our case because the program is mostly
0:34
separated into reusable functions,
each responsible for one major task.
0:38
For example, getJSON manages
requesting and parsing the data and
0:43
generateHTML produces the HTML
to display in the browser.
0:47
Now, we could have nested the entire
program inside addEventListener,
0:51
in that case,
the code might look like this.
0:56
This is effectively what's
referred to as callback hell or
0:59
the pyramid of doom where
multiple callbacks are nested one
1:02
after the other making the code really
hard to understand and maintain.
1:06
Now, there's more we could do to sort
of flatten the callback pyramid in our
1:10
project.
1:14
For example, create a separate function
that just handles mapping over
1:14
the astronaut and making the calls to
getJSON to get each Wikipedia summary.
1:19
Above the generateHTML function, I'll
create a new function called getProfiles.
1:23
Then, I'll cut the entire map
method out of the EventListener and
1:33
paste it inside the new function.
1:38
And let's have the getProfiles
function take the parameter json.
1:41
Then, in addEventListener,
1:48
I'll pass getJSON a reference to
getProfiles as the second argument.
1:50
Separating the code into functions with
descriptive names does make the code
2:03
easier to read.
2:07
Still, having to manage all the different
functions could make the program's flow
2:08
hard to follow and
could make it easier to introduce bugs.
2:13
For instance, someone looking at this code
for the first time might have to peruse
2:16
through the details of each function,
especially the callback sequence
2:20
to figure out exactly what
the program is trying to do.
2:23
In addition, callbacks, along with
the XML http request API can be a bit too
2:28
complex to use and manage compared to
the modern data fetching API tools and
2:33
syntax JavaScript introduced
in ES 2015 and ES 2017.
2:38
Next, you're going to start working with
Promises in JavaScript where you'll learn
2:43
a more straightforward alternative for
executing, composing,
2:47
and managing asynchronous code.
2:50
You'll experience how Promises better help
you follow an async program's flow and
2:52
make it easier to handle
errors in your program.
2:57