Preview
Video Player
00:00
00:00
Handling Errors
5:32What 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.
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