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
Learn how to handle errors in async JavaScript using try and catch, and why it’s essential for building reliable, user-friendly apps. We’ll also cover a key "gotcha" with fetch and how to manually detect and handle HTTP errors like a pro.
Resources
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
Up to this point, our code works,
but there's something important missing.
0:00
Earlier,
when we were using promises with then,
0:04
we also had catch to handle the errors.
0:07
Once we switched to async and await,
that catch disappeared.
0:09
And right now, if something goes wrong,
our app would fail silently
0:13
or throw an error in the console.
0:16
That's where try catch comes in.
0:18
Try catch is JavaScript's way of saying,
try to run this code,
0:20
and if something goes wrong, handle it
gracefully instead of crashing.
0:24
The try block is where we put the code
that might fail, like a network request.
0:28
The catch block runs only
if an error happens inside the try block.
0:33
Let's check it out.
0:37
Okay.
0:39
Let's update
our fetch breed list function.
0:40
I'm going to wrap everything
we currently have inside the function
0:42
within a try block.
0:46
After
this block, we add in our catch block,
0:54
which takes in the error for us to use.
0:56
So I'll just console dot error
1:05
it like before.
1:06
Here's what's happening step by step.
1:10
First, JavaScript enters the try block
and starts running the code line by line.
1:13
If the fetch request fails,
maybe the network is down
1:18
or the API is unavailable,
JavaScript immediately
1:21
stops running the rest of the try block
and jumps straight down to catch.
1:24
The error parameter inside
catch gives us information
1:29
about what went wrong,
which is really helpful for debugging.
1:32
Now before we move on, there's
1:35
something really important to understand
about fetch.
1:37
A fetch request only fails,
meaning it goes to catch,
1:40
if there's a network error,
like no Internet connection.
1:43
If the server responds
with an error status, like 404
1:47
for example, fetch
still considers that a successful request.
1:50
That means we have to manually
check the response.
1:54
This is why that error message
a few videos back was a little bit weird.
1:57
So after our initial fetch call,
before we try to parse it,
2:01
I'm gonna console
dot log our response again.
2:04
When we
2:11
refresh, we can see two properties
we can utilize here.
2:12
There's the status, and there's OK.
2:15
OK is a boolean value.
2:18
It's true if the HTTP status code is in
the 200 range, meaning the request worked.
2:19
If it's false, something went wrong.
2:26
So for our simple app
here, let's just check if this OK
2:28
value is true or false.
2:31
Okay.
2:35
I'll remove this console log again,
and in its place, let's add a conditional.
2:35
We'll check if response dot ok,
2:40
and let's pop the logical
not operator in front.
2:44
So it's checking if it's not okay
2:48
or that the OK property is false.
2:50
If this is the case,
we'll throw a new error
2:53
and provide a message.
2:58
And let's drop
our response status in there.
3:05
So when
3:10
response dot ok is false,
we manually throw an error.
3:11
That immediately stops the function
and sends us down to the catch block.
3:15
Let's test
this out by messing up our endpoint again.
3:19
Save and refresh the preview.
3:22
There it is.
3:28
Awesome.
3:28
Let's fix that endpoint
before we forget about it.
3:29
Without try catch, any error inside
3:36
an async function would result
in an unhandled promise rejection.
3:38
That usually means confusing console
errors and a broken user experience.
3:42
With try catch, we stay in control.
3:47
We can log helpful messages, show feedback
to the user, or even retry the request.
3:50
Again, this feels very similar
to then and catch, but it lets us
3:55
write things in a way that reads top
to bottom like normal synchronous code.
3:59
With this,
we could act however we feel fit,
4:03
like adding UI warnings
directly on the page for users to see
4:06
or performing different actions
depending on what the status was.
4:10
Alright.
4:15
Now that we've restored proper
error handling, our async code is safer,
4:15
clearer, and more production ready.
4:19
Let's have some more fun
with everything we've learned and finish
4:21
up this application.
4:24
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