"Java Data Structures - Retired" was retired on May 31, 2019. You are now viewing the recommended replacement.
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 Working with the Fetch API!
You have completed Working with the Fetch API!
Preview
What would happen if a fetch gets rejected or returns in a failed state? To handle these types of errors, you use the catch() method, which deals with rejected cases only.
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
Our app is now receiving and
0:00
displaying all the content it
needs using fetch and promises.
0:02
But what would happen if a fetch gets
rejected or returned in a failed state?
0:06
For example, if a user is offline,
the API server is down,
0:11
or the API just doesn't have an image for
the selected value?
0:15
To handle these types of errors,
you use the catch method,
0:19
which deals with rejected cases only.
0:23
Back in our project,
0:26
let's chain a catch method to the end
of one of the fetch data sequences.
0:27
I'll chain it to the first
one with .catch.
0:32
And now if there's ever
an error fetching this data,
0:36
catch will get called to handle
any errors thrown by the code.
0:40
Let's pass catch an arrow
function that takes an error
0:44
object via the parameter error and
returns a console.log
0:50
with the error message,
Looks like there was a problem.
0:55
After the string, I'll add a comma and
1:04
log the rejection reason by
passing it the error object.
1:07
So now if a promise is rejected,
catch will get called and
1:12
display this error in the console.
1:17
So for example, if my internet connection
cuts off or if I mistype the URL to fetch,
1:20
I'll see the error message I
wrote in the catch method,
1:27
Looks like there was a problem along
with the TypeError: Failed to fetch.
1:31
Now I want a catch method in
all of my fetch requests.
1:38
Well, instead of chaining
a catch method to each request,
1:42
I'll move this catch method
over to my fetchData function.
1:46
So I'll chain it to its then method.
1:51
I'll go ahead and
fix the URL back to api/breeds/list.
1:56
And now the console error is gone.
2:04
Remember, once the fetch promise
is fulfilled it returns a response
2:12
object containing information
about the response.
2:17
So I'll quickly log all the responses
here in the fetchData function.
2:20
And for example, It lets you
know if the response is okay and
2:27
the status code of the response.
2:33
So the 200 status code is
the most common code returned.
2:36
It means that the request has succeeded.
2:39
Again, I recommend watching our content on
HTTP request and responses to learn more.
2:42
Since fetch is only concerned
with sending a request and
2:48
receiving a response from the server,
2:51
we should also provide a way of checking
for and handling failed HTTP responses.
2:54
The easiest way to do this is
to check if the response is OK.
3:00
So if the response object does not
come back with ok equal to true,
3:06
we'll have the program throw an error
to let us know what happened.
3:10
Back in app.js, let's create a new
function named checkStatus that will check
3:15
if the promise resolved with the response
object's ok property set to true.
3:20
We'll pass it the response
via the parameter response.
3:28
And inside the function we'll say,
if response.ok
3:33
is true, the Promise gets
resolved with the response.
3:40
So in the if block,
I'll return Promise.resolve()
3:47
which returns a promise
object that is resolved with
3:52
the given value, in this case,
the response object.
3:57
Then we'll say else.
4:05
If the response is unsuccessful,
4:07
we're going to reject the Promise
which will activate the catch call.
4:10
So in the else block, I'll return
4:16
Promise.reject() to return
a rejected Promise.
4:19
And we need to pass it the reason it's
rejected, so I'll pass it an error
4:24
object with new Error(),
which will throw when an error occurs.
4:29
And as the error description,
I'll pass it the response
4:34
status text with response.statusText.
4:40
So now if a Promise is rejected because of
a failed HTTP response, the error showing
4:46
the response.statusText will be passed to
the catch method and printed to the console.
4:51
Finally, up in the fetchData function,
4:57
I'll pass the first then method chained
to fetch the checkStatus function.
5:00
So now we have a pretty solid and
dependable sequence here.
5:07
From now on,
if a fetch Promise is fulfilled, first,
5:11
it's going to check
the status of the response.
5:14
If that Promise is resolved, then it
parses the response to JSON, and so on.
5:18
All right, good.
5:24
So in the next video, you'll learn an
additional way of composing Promises with
5:25
the Promise.all method.
5:29
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