1
00:00:01,694 --> 00:00:03,448
Sometimes when you're chaining promises

2
00:00:03,448 --> 00:00:06,294
together, the unexpected can happen, and

3
00:00:06,294 --> 00:00:08,209
as you saw in the last clip, sometimes

4
00:00:08,209 --> 00:00:10,733
that can blow up. We saw that happen when

5
00:00:10,733 --> 00:00:12,698
it logged out the exception to the

6
00:00:12,698 --> 00:00:16,155
console. So, how can you make that a

7
00:00:16,155 --> 00:00:18,362
little bit smoother? Staying inside the

8
00:00:18,362 --> 00:00:20,672
consume file in your IDE, this time we'll

9
00:00:20,672 --> 00:00:23,180
be writing code in the chainCatch

10
00:00:23,180 --> 00:00:25,782
function. Start by copying the code from

11
00:00:25,782 --> 00:00:29,746
the chain function that you just wrote.

12
00:00:29,746 --> 00:00:31,303
But in order to get the error that we got

13
00:00:31,303 --> 00:00:33,707
in the last clip, make sure to delete this

14
00:00:33,707 --> 00:00:36,702
return in the first then function. This

15
00:00:36,702 --> 00:00:38,774
will ensure that we get the same

16
00:00:38,774 --> 00:00:40,980
destructuring error that we got last time.

17
00:00:40,980 --> 00:00:43,587
Next, we want to add a catch function. The

18
00:00:43,587 --> 00:00:46,870
question is, where do we want to add it?

19
00:00:46,870 --> 00:00:48,308
Well let's start by placing it after the

20
00:00:48,308 --> 00:00:52,963
second then. Return to the browser, and

21
00:00:52,963 --> 00:00:56,914
reload the page, and make sure to click on

22
00:00:56,914 --> 00:01:00,148
the Chain Catch button. When you do,

23
00:01:00,148 --> 00:01:01,782
you'll see the results block update with

24
00:01:01,782 --> 00:01:04,006
an error that it can't destructure data

25
00:01:04,006 --> 00:01:07,416
from an undefined or null value. This is

26
00:01:07,416 --> 00:01:09,390
the same error that we saw in our console

27
00:01:09,390 --> 00:01:12,201
last time, but as you look down in the

28
00:01:12,201 --> 00:01:14,530
console now, it's not there. That's

29
00:01:14,530 --> 00:01:16,301
because we've caught it in this promise

30
00:01:16,301 --> 00:01:18,595
chain, and handled it by displaying the

31
00:01:18,595 --> 00:01:20,917
error to the user. Returning to our code,

32
00:01:20,917 --> 00:01:23,100
let's take a look at another way that we

33
00:01:23,100 --> 00:01:25,231
can use this catch function. Start by

34
00:01:25,231 --> 00:01:27,322
adding back that return statement on our

35
00:01:27,322 --> 00:01:29,152
address, so that it completes

36
00:01:29,152 --> 00:01:31,390
successfully. This time, inside of the

37
00:01:31,390 --> 00:01:34,037
second then, introduce an error by adding

38
00:01:34,037 --> 00:01:36,920
a .my after the data. That is, we're

39
00:01:36,920 --> 00:01:40,603
trying to get the city from the myObject.

40
00:01:40,603 --> 00:01:44,795
Save this code, go back to the browser,

41
00:01:44,795 --> 00:01:47,799
and reload. Once again, click that Chain

42
00:01:47,799 --> 00:01:49,677
Catch button, again, there's no console

43
00:01:49,677 --> 00:01:52,160
error this time, but the results block now

44
00:01:52,160 --> 00:01:55,422
shows cannot read property 'city' of

45
00:01:55,422 --> 00:01:57,520
undefined. The catch that you added will

46
00:01:57,520 --> 00:02:00,451
catch any error in your stack. Looking at

47
00:02:00,451 --> 00:02:02,184
the code once more, you can see that the

48
00:02:02,184 --> 00:02:04,896
catch is the last statement in the chain.

49
00:02:04,896 --> 00:02:07,453
It'll catch any error in any of the

50
00:02:07,453 --> 00:02:10,076
previous calls. But what if you wanted

51
00:02:10,076 --> 00:02:12,882
more fine-grain control? Well, you can

52
00:02:12,882 --> 00:02:14,986
actually have that with catch. Instead of

53
00:02:14,986 --> 00:02:17,275
returning the data from the address call,

54
00:02:17,275 --> 00:02:23,771
have it throw an error. Then, add a catch

55
00:02:23,771 --> 00:02:27,860
right after that first then. Notice that

56
00:02:27,860 --> 00:02:30,557
that first catch still returns data, and

57
00:02:30,557 --> 00:02:33,349
in fact, it's returning an object with a

58
00:02:33,349 --> 00:02:35,787
data parameter. If it did not return that,

59
00:02:35,787 --> 00:02:37,894
then the second catch block would also be

60
00:02:37,894 --> 00:02:41,674
hit when the second then block tried to

61
00:02:41,674 --> 00:02:44,217
destructure data. In this case, the first

62
00:02:44,217 --> 00:02:46,747
catch will only catch errors from the

63
00:02:46,747 --> 00:02:49,285
first then; however, the second catch will

64
00:02:49,285 --> 00:02:52,255
catch all of the errors from the first

65
00:02:52,255 --> 00:02:55,482
catch through the second then. To see this

66
00:02:55,482 --> 00:02:57,751
at work, change the return in the first

67
00:02:57,751 --> 00:03:02,029
catch to throw a new error. Then, reload

68
00:03:02,029 --> 00:03:04,322
the consuming page, and click the chain

69
00:03:04,322 --> 00:03:07,781
button one more time. The result block

70
00:03:07,781 --> 00:03:10,139
shows the text of second error, which is

71
00:03:10,139 --> 00:03:12,420
that second catch block that you just

72
00:03:12,420 --> 00:03:14,413
wrote. Going back to the code one last

73
00:03:14,413 --> 00:03:18,098
time, let's put everything back to the way

74
00:03:18,098 --> 00:03:20,606
it was. While you do have the power to

75
00:03:20,606 --> 00:03:22,841
catch at multiple locations, most of the

76
00:03:22,841 --> 00:03:25,618
time you'll probably just want one catch

77
00:03:25,618 --> 00:03:27,669
statement. If you do decide to add

78
00:03:27,669 --> 00:03:29,560
multiple catch statements in your chain,

79
00:03:29,560 --> 00:03:31,818
remember to make sure that you're handling

80
00:03:31,818 --> 00:03:34,245
the error thoroughly; otherwise, if you

81
00:03:34,245 --> 00:03:36,351
just return undefined from your catch,

82
00:03:36,351 --> 00:03:39,682
your code will run into additional errors.

83
00:03:39,682 --> 00:03:41,423
As you start to chain promises together,

84
00:03:41,423 --> 00:03:43,710
you might want some code to run only one

85
00:03:43,710 --> 00:03:45,828
time after the entire chain is settled.

86
00:03:45,828 --> 00:03:48,061
You could have a lot of duplicated code in

87
00:03:48,061 --> 00:03:50,139
each then and catch block to ensure that

88
00:03:50,139 --> 00:03:51,717
you're capturing that the promise is

89
00:03:51,717 --> 00:03:54,698
completely settled, or as I'll show you

90
00:03:54,698 --> 00:03:59,000
next, you could accomplish that with a built-in promise function.

