1
00:00:00,064 --> 00:00:02,095
Our app is now receiving and

2
00:00:02,095 --> 00:00:06,783
displaying all the content it
needs using fetch and promises.

3
00:00:06,783 --> 00:00:11,893
But what would happen if a fetch gets
rejected or returned in a failed state?

4
00:00:11,893 --> 00:00:15,648
For example, if a user is offline,
the API server is down,

5
00:00:15,648 --> 00:00:19,570
or the API just doesn't have an image for
the selected value?

6
00:00:19,570 --> 00:00:23,676
To handle these types of errors,
you use the catch method,

7
00:00:23,676 --> 00:00:26,403
which deals with rejected cases only.

8
00:00:26,403 --> 00:00:27,793
Back in our project,

9
00:00:27,793 --> 00:00:32,519
let's chain a catch method to the end
of one of the fetch data sequences.

10
00:00:32,519 --> 00:00:36,741
I'll chain it to the first
one with .catch.

11
00:00:36,741 --> 00:00:40,552
And now if there's ever
an error fetching this data,

12
00:00:40,552 --> 00:00:44,966
catch will get called to handle
any errors thrown by the code.

13
00:00:44,966 --> 00:00:50,179
Let's pass catch an arrow
function that takes an error

14
00:00:50,179 --> 00:00:55,734
object via the parameter error and
returns a console.log

15
00:00:55,734 --> 00:01:01,187
with the error message,
Looks like there was a problem.

16
00:01:04,581 --> 00:01:07,188
After the string, I'll add a comma and

17
00:01:07,188 --> 00:01:10,984
log the rejection reason by
passing it the error object.

18
00:01:12,423 --> 00:01:17,467
So now if a promise is rejected,
catch will get called and

19
00:01:17,467 --> 00:01:20,631
display this error in the console.

20
00:01:20,631 --> 00:01:27,401
So for example, if my internet connection
cuts off or if I mistype the URL to fetch,

21
00:01:27,401 --> 00:01:31,948
I'll see the error message I
wrote in the catch method,

22
00:01:31,948 --> 00:01:38,070
Looks like there was a problem along
with the TypeError: Failed to fetch.

23
00:01:38,070 --> 00:01:42,195
Now I want a catch method in
all of my fetch requests.

24
00:01:42,195 --> 00:01:46,753
Well, instead of chaining
a catch method to each request,

25
00:01:46,753 --> 00:01:51,412
I'll move this catch method
over to my fetchData function.

26
00:01:51,412 --> 00:01:54,489
So I'll chain it to its then method.

27
00:01:56,419 --> 00:02:04,370
I'll go ahead and
fix the URL back to api/breeds/list.

28
00:02:04,370 --> 00:02:07,350
And now the console error is gone.

29
00:02:12,235 --> 00:02:17,063
Remember, once the fetch promise
is fulfilled it returns a response

30
00:02:17,063 --> 00:02:20,820
object containing information
about the response.

31
00:02:20,820 --> 00:02:27,765
So I'll quickly log all the responses
here in the fetchData function.

32
00:02:27,765 --> 00:02:33,620
And for example, It lets you
know if the response is okay and

33
00:02:33,620 --> 00:02:36,060
the status code of the response.

34
00:02:36,060 --> 00:02:39,439
So the 200 status code is
the most common code returned.

35
00:02:39,439 --> 00:02:42,310
It means that the request has succeeded.

36
00:02:42,310 --> 00:02:48,050
Again, I recommend watching our content on
HTTP request and responses to learn more.

37
00:02:48,050 --> 00:02:51,954
Since fetch is only concerned
with sending a request and

38
00:02:51,954 --> 00:02:54,695
receiving a response from the server,

39
00:02:54,695 --> 00:03:00,356
we should also provide a way of checking
for and handling failed HTTP responses.

40
00:03:00,356 --> 00:03:06,185
The easiest way to do this is
to check if the response is OK.

41
00:03:06,185 --> 00:03:10,979
So if the response object does not
come back with ok equal to true,

42
00:03:10,979 --> 00:03:15,957
we'll have the program throw an error
to let us know what happened.

43
00:03:15,957 --> 00:03:20,853
Back in app.js, let's create a new
function named checkStatus that will check

44
00:03:20,853 --> 00:03:25,535
if the promise resolved with the response
object's ok property set to true.

45
00:03:28,011 --> 00:03:32,570
We'll pass it the response
via the parameter response.

46
00:03:33,670 --> 00:03:40,524
And inside the function we'll say,
if response.ok

47
00:03:40,524 --> 00:03:44,740
is true, the Promise gets
resolved with the response.

48
00:03:47,060 --> 00:03:52,408
So in the if block,
I'll return Promise.resolve()

49
00:03:52,408 --> 00:03:57,415
which returns a promise
object that is resolved with

50
00:03:57,415 --> 00:04:02,670
the given value, in this case,
the response object.

51
00:04:05,466 --> 00:04:07,280
Then we'll say else.

52
00:04:07,280 --> 00:04:10,203
If the response is unsuccessful,

53
00:04:10,203 --> 00:04:16,265
we're going to reject the Promise
which will activate the catch call.

54
00:04:16,265 --> 00:04:19,528
So in the else block, I'll return

55
00:04:19,528 --> 00:04:24,601
Promise.reject() to return
a rejected Promise.

56
00:04:24,601 --> 00:04:29,828
And we need to pass it the reason it's
rejected, so I'll pass it an error

57
00:04:29,828 --> 00:04:34,728
object with new Error(),
which will throw when an error occurs.

58
00:04:34,728 --> 00:04:40,085
And as the error description,
I'll pass it the response

59
00:04:40,085 --> 00:04:44,559
status text with response.statusText.

60
00:04:46,130 --> 00:04:51,660
So now if a Promise is rejected because of
a failed HTTP response, the error showing

61
00:04:51,660 --> 00:04:57,520
the response.statusText will be passed to
the catch method and printed to the console.

62
00:04:57,520 --> 00:05:00,460
Finally, up in the fetchData function,

63
00:05:00,460 --> 00:05:05,923
I'll pass the first then method chained
to fetch the checkStatus function.

64
00:05:07,766 --> 00:05:11,041
So now we have a pretty solid and
dependable sequence here.

65
00:05:11,041 --> 00:05:14,871
From now on,
if a fetch Promise is fulfilled, first,

66
00:05:14,871 --> 00:05:18,678
it's going to check
the status of the response.

67
00:05:18,678 --> 00:05:24,286
If that Promise is resolved, then it
parses the response to JSON, and so on.

68
00:05:24,286 --> 00:05:25,048
All right, good.

69
00:05:25,048 --> 00:05:29,615
So in the next video, you'll learn an
additional way of composing Promises with

70
00:05:29,615 --> 00:05:31,170
the Promise.all method.