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 JavaScript Data Fetching!
You have completed JavaScript Data Fetching!
Preview
In this final lesson, we’ll use the finally block to clean up your app after async operations, creating a simple loading state that always resets correctly. It’s the perfect wrap-up to everything you’ve learned about async JavaScript, error handling, and building polished, user-friendly experiences.
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
Along with try and catch, JavaScript also
gives us a third block called finally.
0:00
The finally block runs
no matter what happens,
0:05
whether the code succeeds, fails,
or throws an error.
0:08
This makes finally perfect
for cleanup work.
0:11
Anything that should always happen
after an operation finishes belongs here,
0:14
like hiding a loading spinner, reenabling
a button, or resetting part of the UI.
0:19
So that's exactly what we're going
to do here.
0:24
At the very bottom of the CSS,
0:28
I already have some simple styles in place
to help us out.
0:30
So what I'd like to do is anytime
we're about to make a fetch request
0:34
to the dog API,
we put the app in a kind of loading state.
0:38
And once the response is returned,
no matter if it succeeded
0:42
or failed,
we bring things back to a normal state.
0:44
We're gonna keep it simple, though.
0:48
So first,
0:50
I'd like to create our helper functions
to keep our code clean and organized.
0:50
So let's go down to our UI
helper functions and create a new one.
0:55
I'm going to
1:00
name this one enter loading state.
1:00
I think an easy and subtle way
to visually show this to
1:04
the user is to just bring the opacity
of our current image down.
1:07
We can also disable our button and select
menu so they can't spam these things.
1:11
So let's get our dog image.
1:16
We'll access its style dot opacity,
1:18
and we'll set it equal to 0.5.
1:21
Then we can simply disable
our fetch button
1:27
and our select menu.
1:37
Cool.
1:41
Let's copy and paste this entire function
to make the inverse
1:42
of that.
1:45
We'll rename it to exit loading state,
1:50
set the opacity back to one,
1:57
and set these to false
2:03
so that they're no longer disabled.
2:04
Sweet.
2:10
Let's work them in.
2:10
Since the first thing we do in both
our fetch
2:12
wrapper
functions is call our fetch data function,
2:14
I think it's safe to add our enter
call inside of fetch data.
2:17
This will prevent us from
2:21
needing to do it twice.
2:22
Let's save this
and make sure it's working.
2:27
Let's refresh, and yep.
2:29
Okay.
2:32
So our image opacity is lowered,
and because of the CSS
2:32
I put
in, so are our button and select menu.
2:36
Both of these are also disabled,
so we're unable to click these now.
2:39
Perfect.
2:43
Let's get us out of this state.
2:44
Unlike catch, the finally block
2:47
does not receive an error object
or any other value.
2:48
That's because finally isn't meant
for handling success or failure.
2:52
It's meant for cleanup.
2:55
It runs no matter what happens,
and it doesn't care
2:57
why the code finished,
only that it finished.
2:59
So let's add our finally keyword
3:02
after our closing catch block and open
another block.
3:04
In here, we simply call our exit method.
3:08
And that's it.
3:14
Let's do the same below.
3:15
I'll just copy and paste this one.
3:17
Let's save and check our work.
3:27
Refresh. Awesome.
3:29
So this is a simple example here,
of course, but I think it drives the point
3:32
home.
3:35
Finally is optional,
and you likely won't be using it
3:36
too often, but it can really come in
handy in certain situations
3:39
like this.
3:42
Alright.
3:47
I know what you're thinking.
3:47
FINALLY, we're done!
3:48
But, seriously, look how far you've come.
3:51
You started by learning
how the web actually works under the hood
3:53
with HTTP, requests,
responses, and status codes.
3:56
Then we pulled back the curtain on Ajax
and saw how browsers
4:01
can talk to servers
without refreshing the page.
4:04
We wrestled with callbacks,
made promises literally, and learned
4:07
how JavaScript handles asynchronous code
without freezing everything.
4:11
We moved from XHR to fetch,
4:15
from then to async and await,
and you even learned how to catch
4:17
errors, recover gracefully,
and do some cleanup with Finally.
4:21
If asynchronous JavaScript still feels
a bit confusing, that's normal.
4:25
It's a whole new way
to think about programming.
4:29
I've left a link in the teacher's
notes below to a course that really dives
4:32
deep into it.
4:35
I also left a link to a course
that goes much further with HTTP.
4:37
I highly recommend bookmarking those
and checking them out to further
4:41
your knowledge.
4:44
There's lots of fun APIs out there
you can play with.
4:46
Trust me.
4:48
The side project ideas are gonna really
start flowing once you look at them.
4:49
I've left a link in the teacher's
4:53
notes for a site
with some free ones that you can peruse.
4:54
Thanks for sticking through this with me,
and I'll see you next time.
4:58
Now go fetch something awesome.
5:01
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