1
00:00:01,210 --> 00:00:02,880
‫Let's now actually start to learn

2
00:00:02,880 --> 00:00:05,783
‫how to solve callback hell by using promises.

3
00:00:07,430 --> 00:00:09,750
‫And we're gonna start off by using a promise

4
00:00:09,750 --> 00:00:11,260
‫for the agent appear request

5
00:00:11,260 --> 00:00:13,010
‫instead of the callback.

6
00:00:13,010 --> 00:00:16,410
‫And this is gonna work because the super agent library

7
00:00:16,410 --> 00:00:19,770
‫actually has support for promises out of the box,

8
00:00:19,770 --> 00:00:21,980
‫and so we can simply use them here.

9
00:00:21,980 --> 00:00:25,410
‫For node functions, coming from internal node packages

10
00:00:25,410 --> 00:00:28,395
‫like Read File, we will actually have to build the promise

11
00:00:28,395 --> 00:00:31,690
‫ourselves, and we will do that later in the next lecture,

12
00:00:31,690 --> 00:00:32,523
‫or so.

13
00:00:32,523 --> 00:00:33,356
‫But for now,

14
00:00:33,356 --> 00:00:36,120
‫I want you to learn how to consume promises

15
00:00:36,120 --> 00:00:38,500
‫and only later how to build them.

16
00:00:38,500 --> 00:00:40,433
‫Okay, so again we're going to start

17
00:00:40,433 --> 00:00:42,350
‫with the super agent library

18
00:00:42,350 --> 00:00:45,930
‫and more specifically with the get method here.

19
00:00:45,930 --> 00:00:50,220
‫Because this method here actually returns a promise.

20
00:00:50,220 --> 00:00:53,690
‫So without going into too much detail, for now,

21
00:00:53,690 --> 00:00:55,410
‫a promise basically implements

22
00:00:55,410 --> 00:00:57,550
‫the concept of a future value.

23
00:00:57,550 --> 00:01:00,470
‫So basically, a value that we are expecting to receive

24
00:01:00,470 --> 00:01:02,270
‫some time in the future,

25
00:01:02,270 --> 00:01:04,900
‫so it's a bit like us saying, "Hey, server,"

26
00:01:04,900 --> 00:01:08,157
‫or "Hey, API, please get me a random dog image

27
00:01:08,157 --> 00:01:10,617
‫"in the background and let me know when you're ready

28
00:01:10,617 --> 00:01:13,410
‫"and then give me that data back."

29
00:01:13,410 --> 00:01:14,243
‫Okay?

30
00:01:14,243 --> 00:01:16,906
‫So that random image is the value that we expect

31
00:01:16,906 --> 00:01:19,140
‫sometime in the future.

32
00:01:19,140 --> 00:01:21,340
‫And that is exactly the kind of request

33
00:01:21,340 --> 00:01:23,650
‫that we're doing using a super agent library

34
00:01:23,650 --> 00:01:24,740
‫in this example.

35
00:01:24,740 --> 00:01:25,573
‫Right.

36
00:01:25,573 --> 00:01:28,840
‫And the get method that we use again will automatically

37
00:01:28,840 --> 00:01:32,660
‫and immediately return a promise as soon as we start

38
00:01:32,660 --> 00:01:33,493
‫the request.

39
00:01:33,493 --> 00:01:35,870
‫So the promise doesn't have a value yet,

40
00:01:35,870 --> 00:01:38,610
‫because the server is actually still getting the data

41
00:01:38,610 --> 00:01:41,470
‫from the server asynchronously in the background

42
00:01:41,470 --> 00:01:43,790
‫but the promise is immediately available

43
00:01:43,790 --> 00:01:47,070
‫and basically promising us that it will get some data back

44
00:01:47,070 --> 00:01:48,070
‫in the future.

45
00:01:48,070 --> 00:01:50,150
‫Okay, does that make sense?

46
00:01:50,150 --> 00:01:52,960
‫And that state of the promise in that case,

47
00:01:52,960 --> 00:01:55,660
‫so right in the beginning, is a pending promise.

48
00:01:55,660 --> 00:01:58,331
‫So it's still pending, it still hasn't gotten back

49
00:01:58,331 --> 00:02:01,050
‫with any data, okay?

50
00:02:01,050 --> 00:02:03,480
‫So here at this point, we already have a promise

51
00:02:03,480 --> 00:02:04,750
‫that we can work with.

52
00:02:04,750 --> 00:02:07,470
‫Now all we need to do is consume it,

53
00:02:07,470 --> 00:02:10,350
‫which basically means that we wait for it to come back

54
00:02:10,350 --> 00:02:11,470
‫with the data.

55
00:02:11,470 --> 00:02:14,513
‫And to do that, we use the then method on it.

56
00:02:15,710 --> 00:02:19,650
‫So, all we do is to use then

57
00:02:19,650 --> 00:02:22,950
‫and then in here, we pass a callback function.

58
00:02:22,950 --> 00:02:25,730
‫This callback function will then be called as soon

59
00:02:25,730 --> 00:02:29,740
‫as the promise is done doing its work and has come back

60
00:02:29,740 --> 00:02:30,980
‫with the data.

61
00:02:30,980 --> 00:02:33,520
‫And that data is then available as an argument

62
00:02:33,520 --> 00:02:34,630
‫to that callback.

63
00:02:34,630 --> 00:02:36,380
‫Now I like to call that the result.

64
00:02:39,270 --> 00:02:42,140
‫And so, again in that callback function that we have here

65
00:02:42,140 --> 00:02:44,690
‫we then have that data available.

66
00:02:44,690 --> 00:02:47,962
‫So let's take all of this here and put it into

67
00:02:47,962 --> 00:02:50,830
‫this then callback function

68
00:02:50,830 --> 00:02:52,423
‫and actually get rid of this.

69
00:02:53,530 --> 00:02:55,350
‫So we no longer need that,

70
00:02:55,350 --> 00:02:57,110
‫and give it a save.

71
00:02:57,110 --> 00:03:00,380
‫Now you might be thinking, well, we're still using

72
00:03:00,380 --> 00:03:04,510
‫callbacks here, and yeah, that's actually true.

73
00:03:04,510 --> 00:03:07,650
‫So this does not look like a big change for now,

74
00:03:07,650 --> 00:03:10,530
‫but after we transform the whole example here to

75
00:03:10,530 --> 00:03:11,770
‫promises, you will see

76
00:03:11,770 --> 00:03:15,657
‫the big impact that promises will have on our code.

77
00:03:15,657 --> 00:03:19,320
‫So that's basically if we have multiple promises,

78
00:03:19,320 --> 00:03:22,700
‫we will be able to chain these callbacks onto one other

79
00:03:22,700 --> 00:03:24,150
‫instead of nesting them.

80
00:03:24,150 --> 00:03:26,343
‫Which is already a huge improvement.

81
00:03:27,370 --> 00:03:29,520
‫Now one thing that I forgot to mention earlier

82
00:03:29,520 --> 00:03:32,850
‫is that a promise as soon as it comes back with the data

83
00:03:32,850 --> 00:03:34,980
‫is called a resolved promise.

84
00:03:34,980 --> 00:03:37,180
‫So in the beginning it's a pending promise and

85
00:03:37,180 --> 00:03:39,160
‫when it successfully gets the data,

86
00:03:39,160 --> 00:03:41,180
‫it is then a resolved promise.

87
00:03:41,180 --> 00:03:44,600
‫However, a resolved promise might not always be

88
00:03:44,600 --> 00:03:47,670
‫successful because there might have been an error.

89
00:03:47,670 --> 00:03:50,895
‫So we say that a resolved promise can either be fulfilled

90
00:03:50,895 --> 00:03:52,510
‫or rejected.

91
00:03:52,510 --> 00:03:55,680
‫The fulfilled promise actually has a result that we want

92
00:03:55,680 --> 00:03:56,513
‫to use.

93
00:03:56,513 --> 00:04:00,860
‫While a rejected promise is when there was an error.

94
00:04:00,860 --> 00:04:03,050
‫So remember the situation that we had before

95
00:04:03,050 --> 00:04:05,950
‫where we had a wrong dog breed.

96
00:04:05,950 --> 00:04:07,750
‫So in that case, we had an error,

97
00:04:07,750 --> 00:04:11,840
‫and we handled that error using this piece of code here.

98
00:04:11,840 --> 00:04:12,673
‫Okay.

99
00:04:12,673 --> 00:04:14,980
‫Now the thing with this then method here is that it

100
00:04:14,980 --> 00:04:18,160
‫actually only handles fulfilled promises but it doesn't do

101
00:04:18,160 --> 00:04:20,770
‫anything if there was an error,

102
00:04:20,770 --> 00:04:23,640
‫because for that, we actually have another method.

103
00:04:23,640 --> 00:04:25,790
‫So another mechanism of handling that.

104
00:04:25,790 --> 00:04:27,840
‫And that is the catch method.

105
00:04:27,840 --> 00:04:29,960
‫So right after the then method, we can chain

106
00:04:29,960 --> 00:04:32,753
‫another method which is called catch.

107
00:04:34,390 --> 00:04:35,223
‫Okay.

108
00:04:35,223 --> 00:04:38,350
‫And so this one will get called if there was an error.

109
00:04:38,350 --> 00:04:42,243
‫So in here, we actually have access to that error object.

110
00:04:44,480 --> 00:04:46,640
‫And so let's now go ahead,

111
00:04:46,640 --> 00:04:48,590
‫take this piece of code,

112
00:04:48,590 --> 00:04:49,423
‫and put it here,

113
00:04:49,423 --> 00:04:52,290
‫and now we can get rid of this.

114
00:04:52,290 --> 00:04:54,310
‫Because actually in this then method,

115
00:04:54,310 --> 00:04:56,330
‫we have no information if there was an error

116
00:04:56,330 --> 00:04:59,000
‫or not because it only ever gets called

117
00:04:59,000 --> 00:05:01,620
‫in case the promise was successful.

118
00:05:01,620 --> 00:05:03,440
‫So if it's a fulfilled promise.

119
00:05:03,440 --> 00:05:07,120
‫Okay, so this is kind of nice to actually separate

120
00:05:07,120 --> 00:05:09,870
‫these two cases automatically for us.

121
00:05:09,870 --> 00:05:12,400
‫So instead of having that weird handling

122
00:05:12,400 --> 00:05:13,470
‫that we had before,

123
00:05:13,470 --> 00:05:17,400
‫we can simply write all the logic for the successful case

124
00:05:17,400 --> 00:05:19,080
‫which is the most usual one

125
00:05:19,080 --> 00:05:21,900
‫because we usually expect everything to work all right,

126
00:05:21,900 --> 00:05:24,550
‫but in case there was an error, we can input

127
00:05:24,550 --> 00:05:29,336
‫some other logic down here into this error handler here.

128
00:05:29,336 --> 00:05:32,370
‫So we keep that nicely separated.

129
00:05:32,370 --> 00:05:33,853
‫Let's change it here again.

130
00:05:36,030 --> 00:05:38,493
‫Give this one another save to run it again.

131
00:05:39,450 --> 00:05:41,710
‫And so here we have Not Found,

132
00:05:41,710 --> 00:05:45,720
‫and so you see that actually it did enter this catch

133
00:05:45,720 --> 00:05:47,860
‫method here and didn't do any of the things

134
00:05:47,860 --> 00:05:50,270
‫that's in this then method.

135
00:05:50,270 --> 00:05:52,980
‫Now go ahead and fix this here,

136
00:05:52,980 --> 00:05:53,813
‫close it,

137
00:05:53,813 --> 00:05:54,900
‫give this one a save,

138
00:05:54,900 --> 00:05:55,910
‫and here we go.

139
00:05:55,910 --> 00:05:58,620
‫So that is how we consume promises.

140
00:05:58,620 --> 00:06:01,870
‫So we started with this method here which

141
00:06:01,870 --> 00:06:04,280
‫returned a promise and so on that,

142
00:06:04,280 --> 00:06:06,160
‫we can chain the then method

143
00:06:06,160 --> 00:06:08,810
‫which handles basically the successful case,

144
00:06:08,810 --> 00:06:12,060
‫and then in the end, we also chain the catch method

145
00:06:12,060 --> 00:06:16,090
‫which handles the unsuccessful, so the rejected, promise.

146
00:06:16,090 --> 00:06:19,860
‫But as I said before, this kind of still looks like

147
00:06:19,860 --> 00:06:20,930
‫it did before.

148
00:06:20,930 --> 00:06:21,763
‫Right?

149
00:06:21,763 --> 00:06:25,000
‫So we still have this callback function up here

150
00:06:26,180 --> 00:06:28,440
‫so all of this callback function

151
00:06:28,440 --> 00:06:32,520
‫and also here inside our then method, we have this callback

152
00:06:32,520 --> 00:06:34,600
‫function of the writeFile.

153
00:06:34,600 --> 00:06:37,663
‫So let's go ahead and fix that right in the next video.