1
00:00:01,210 --> 00:00:02,370
‫So you already learned

2
00:00:02,370 --> 00:00:03,980
‫how to use a Async/Await

3
00:00:03,980 --> 00:00:05,970
‫but there's actually a bit more to learn

4
00:00:05,970 --> 00:00:09,240
‫about how Async functions actually work.

5
00:00:09,240 --> 00:00:10,613
‫So let's do that now.

6
00:00:12,140 --> 00:00:15,080
‫In order to understand a bit better what happens here,

7
00:00:15,080 --> 00:00:18,330
‫let's just try to add some console.logs

8
00:00:18,330 --> 00:00:21,333
‫after and before calling Async functions here.

9
00:00:22,640 --> 00:00:24,520
‫Okay, so console.log

10
00:00:26,310 --> 00:00:27,940
‫So step one

11
00:00:29,686 --> 00:00:31,383
‫will get dog pics,

12
00:00:32,340 --> 00:00:33,360
‫okay.

13
00:00:33,360 --> 00:00:34,763
‫And then number two.

14
00:00:36,690 --> 00:00:37,730
‫Here let's just say,

15
00:00:37,730 --> 00:00:42,410
‫done getting dog pics.

16
00:00:42,410 --> 00:00:44,433
‫Okay. So let's give it a save.

17
00:00:45,460 --> 00:00:47,570
‫And whoa, what happened here.

18
00:00:47,570 --> 00:00:50,160
‫We have these two console.logs

19
00:00:50,160 --> 00:00:54,120
‫before all the logs coming from the Async function.

20
00:00:54,120 --> 00:00:56,346
‫So we have the one, two

21
00:00:56,346 --> 00:00:57,900
‫for this one and this one

22
00:00:57,900 --> 00:00:59,610
‫and only after that we have the logs coming

23
00:00:59,610 --> 00:01:01,530
‫from the get dog pic.

24
00:01:01,530 --> 00:01:03,290
‫Is that what you were expecting?

25
00:01:03,290 --> 00:01:06,320
‫So if not, let's analyze what happened here.

26
00:01:06,320 --> 00:01:09,650
‫Well, as I told you before, this Async function

27
00:01:09,650 --> 00:01:11,940
‫actually runs in the background.

28
00:01:11,940 --> 00:01:15,160
‫Because well that's how Async functions

29
00:01:15,160 --> 00:01:17,150
‫are simply supposed to behave.

30
00:01:17,150 --> 00:01:18,960
‫Right, that makes total sense?

31
00:01:18,960 --> 00:01:21,623
‫So we cannot just stop the code here.

32
00:01:22,470 --> 00:01:24,920
‫So as soon as we hit this function

33
00:01:24,920 --> 00:01:29,440
‫we cannot simply stop execution of our main thread here.

34
00:01:29,440 --> 00:01:30,273
‫Right?

35
00:01:30,273 --> 00:01:32,750
‫And that's the whole philosophy of don't block

36
00:01:32,750 --> 00:01:34,120
‫the event log.

37
00:01:34,120 --> 00:01:37,270
‫So we need to get some dog pictures from the API,

38
00:01:37,270 --> 00:01:40,550
‫but that's not an excuse to stop execution over code.

39
00:01:40,550 --> 00:01:42,840
‫So to block the event log.

40
00:01:42,840 --> 00:01:45,770
‫So as a result when the java script engine ceased,

41
00:01:45,770 --> 00:01:48,480
‫this line of code here, it will just offload

42
00:01:48,480 --> 00:01:51,220
‫the get dog pic function to the background

43
00:01:51,220 --> 00:01:53,230
‫and go straight to the next line.

44
00:01:53,230 --> 00:01:55,850
‫So this second console.log here.

45
00:01:55,850 --> 00:01:59,890
‫So it makes sense that first this string here gets logged,

46
00:01:59,890 --> 00:02:01,990
‫then it will start running this function,

47
00:02:01,990 --> 00:02:05,270
‫then right away it will log this line of code

48
00:02:05,270 --> 00:02:08,470
‫and in the mean time, we read this file in the background,

49
00:02:08,470 --> 00:02:10,390
‫and as soon as that is ready,

50
00:02:10,390 --> 00:02:13,370
‫it will start printing this log, this log,

51
00:02:13,370 --> 00:02:14,920
‫and also this log.

52
00:02:14,920 --> 00:02:16,340
‫So that's exactly what's happening here.

53
00:02:16,340 --> 00:02:19,760
‫One two, and then then remaining three ones.

54
00:02:19,760 --> 00:02:21,550
‫Make sense? Okay.

55
00:02:21,550 --> 00:02:24,210
‫Then let's take it a step further, and actually

56
00:02:24,210 --> 00:02:28,500
‫return something from our Async function.

57
00:02:28,500 --> 00:02:31,673
‫So I'm changing this here to three, so that from

58
00:02:31,673 --> 00:02:34,740
‫this function, we can return a string

59
00:02:35,590 --> 00:02:40,570
‫which says two, well let's say ready

60
00:02:40,570 --> 00:02:43,410
‫and then let's add here again an emoji here

61
00:02:43,410 --> 00:02:46,430
‫to make it pop a little bit more in our console.

62
00:02:46,430 --> 00:02:47,853
‫So ready here.

63
00:02:48,770 --> 00:02:51,063
‫And then let's save that.

64
00:02:53,100 --> 00:02:55,883
‫Simply some variable, doesn't matter what it is.

65
00:02:59,040 --> 00:03:01,520
‫And then log x to the console.

66
00:03:01,520 --> 00:03:03,260
‫So let's see what happens.

67
00:03:03,260 --> 00:03:06,050
‫And then now here we get this weird promise pending

68
00:03:06,050 --> 00:03:10,800
‫instead of the string here that we were maybe expecting.

69
00:03:10,800 --> 00:03:14,180
‫So why is x here and not this string,

70
00:03:14,180 --> 00:03:16,330
‫but this promise here?

71
00:03:16,330 --> 00:03:19,310
‫Well, remember how I said in the beginning

72
00:03:19,310 --> 00:03:21,860
‫of the last video that an Async function

73
00:03:21,860 --> 00:03:24,630
‫actually returns a promise automatically?

74
00:03:24,630 --> 00:03:27,490
‫Well, so this here is the proof for that.

75
00:03:27,490 --> 00:03:30,830
‫So instead of logging ready to the console at this point,

76
00:03:30,830 --> 00:03:33,670
‫it just tells us that x is a promise

77
00:03:33,670 --> 00:03:35,730
‫which at this point is still running,

78
00:03:35,730 --> 00:03:36,950
‫and so it's still pending.

79
00:03:36,950 --> 00:03:39,140
‫So that's why it says pending here.

80
00:03:39,140 --> 00:03:42,460
‫So java script can of course not know that x

81
00:03:42,460 --> 00:03:45,390
‫will be this ready string here at some point.

82
00:03:45,390 --> 00:03:48,350
‫And so it simply moves on to the next console.log

83
00:03:48,350 --> 00:03:50,870
‫just as we had discussed before.

84
00:03:50,870 --> 00:03:53,380
‫And at the time that JavaScript actually knows

85
00:03:53,380 --> 00:03:57,176
‫that this x here should be the strain that we returned

86
00:03:57,176 --> 00:03:59,480
‫well at that point, this code here has

87
00:03:59,480 --> 00:04:01,570
‫long finished executing.

88
00:04:01,570 --> 00:04:04,160
‫But what should we do if we actually wanted

89
00:04:04,160 --> 00:04:06,860
‫to get that return value here?

90
00:04:06,860 --> 00:04:09,930
‫So what if we really wanted to return this string

91
00:04:09,930 --> 00:04:11,950
‫and log it through the console?

92
00:04:11,950 --> 00:04:14,670
‫Well, we would have to treat this Async function

93
00:04:14,670 --> 00:04:15,980
‫as a promise.

94
00:04:15,980 --> 00:04:18,310
‫And so we would use the DEN method on it

95
00:04:18,310 --> 00:04:21,080
‫or again, use Async/Await.

96
00:04:21,080 --> 00:04:23,510
‫Let me show you how to do that.

97
00:04:23,510 --> 00:04:27,840
‫So instead of trying to save the returned value

98
00:04:27,840 --> 00:04:32,513
‫to a variable, we can use the DEN method on it.

99
00:04:34,400 --> 00:04:37,113
‫And so here is where we can then call it x.

100
00:04:38,750 --> 00:04:43,157
‫So console.log x so just like what we had here

101
00:04:43,157 --> 00:04:45,850
‫and then we would also do this one inside

102
00:04:45,850 --> 00:04:47,513
‫of the DEN handle, okay?

103
00:04:48,511 --> 00:04:49,920
‫So let's review what we did here.

104
00:04:49,920 --> 00:04:53,550
‫So get dog pic returns a promise, remember that?

105
00:04:53,550 --> 00:04:57,760
‫And so each that we have a promise, we use the DEN method

106
00:04:57,760 --> 00:05:00,690
‫in order to get access to its future value.

107
00:05:00,690 --> 00:05:04,120
‫So the value that will eventually return.

108
00:05:04,120 --> 00:05:08,050
‫In that case, this will be the two ready string.

109
00:05:08,050 --> 00:05:08,883
‫Okay?

110
00:05:08,883 --> 00:05:10,540
‫And so if you want to get x to that,

111
00:05:10,540 --> 00:05:14,520
‫we need to use the DEN method like we just did here.

112
00:05:14,520 --> 00:05:17,370
‫And only after that we then can log the third

113
00:05:17,370 --> 00:05:19,218
‫string right here.

114
00:05:19,218 --> 00:05:21,010
‫So if we give it a save now like this

115
00:05:21,010 --> 00:05:23,760
‫it should then work as expected.

116
00:05:23,760 --> 00:05:24,890
‫And yeah it does.

117
00:05:24,890 --> 00:05:28,420
‫So we have our first log, then all the logs coming

118
00:05:28,420 --> 00:05:32,120
‫from our Async function, then the ready

119
00:05:32,120 --> 00:05:34,795
‫coming from line 42 here.

120
00:05:34,795 --> 00:05:36,530
‫And finally, the number 3. Perfect.

121
00:05:36,530 --> 00:05:39,083
‫And I hope it makes complete sense to you.

122
00:05:40,416 --> 00:05:43,530
‫Now what happens if there actually was an error?

123
00:05:43,530 --> 00:05:45,853
‫Well that's a bit more difficult to handle.

124
00:05:47,149 --> 00:05:50,410
‫So let's again, cause an error like we did before.

125
00:05:50,410 --> 00:05:54,020
‫But you see that actually we still enter

126
00:05:54,020 --> 00:05:55,630
‫the DEN method here.

127
00:05:55,630 --> 00:05:58,640
‫So this block here, okay.

128
00:05:58,640 --> 00:06:03,230
‫So even if there was an error here in this promise

129
00:06:03,230 --> 00:06:06,980
‫it basically still resolves as a successful promise.

130
00:06:06,980 --> 00:06:09,720
‫So it still returns this value here.

131
00:06:09,720 --> 00:06:12,560
‫And even if we add our catch handler down here

132
00:06:12,560 --> 00:06:14,373
‫that will not change that fact.

133
00:06:16,040 --> 00:06:18,317
‫Okay, so let's use catch here

134
00:06:22,760 --> 00:06:26,620
‫and then use console.log and log the error here

135
00:06:26,620 --> 00:06:30,300
‫so you can see that it still didn't log any error.

136
00:06:30,300 --> 00:06:33,620
‫And that's again because this promise here

137
00:06:33,620 --> 00:06:36,270
‫coming from this Async function will still be

138
00:06:36,270 --> 00:06:38,410
‫marked as successful.

139
00:06:38,410 --> 00:06:41,170
‫But if you really wanted to mark it as rejected

140
00:06:41,170 --> 00:06:44,450
‫we will have to do something called throwing an error.

141
00:06:44,450 --> 00:06:46,660
‫So let's do that here in this catch block.

142
00:06:46,660 --> 00:06:50,250
‫So if there was an error, we not only want to log it

143
00:06:50,250 --> 00:06:53,183
‫to the console, we also want to throw it.

144
00:06:54,830 --> 00:06:59,123
‫So we use a built in JavaScript function called throw.

145
00:07:00,080 --> 00:07:02,460
‫And with that we can throw an error.

146
00:07:02,460 --> 00:07:06,680
‫So this will now mark this entire function of this promise

147
00:07:06,680 --> 00:07:07,693
‫as rejected.

148
00:07:08,600 --> 00:07:09,540
‫Okay.

149
00:07:09,540 --> 00:07:12,570
‫Actually let's not just log this error,

150
00:07:12,570 --> 00:07:17,210
‫let's simply do error to make it a bit more visible,

151
00:07:17,210 --> 00:07:19,932
‫and something like an explosion maybe.

152
00:07:19,932 --> 00:07:20,843
‫Yeah, something like this.

153
00:07:22,250 --> 00:07:26,130
‫Okay, and so let's give it a save an see what happens.

154
00:07:26,130 --> 00:07:29,380
‫And bam, so now we have our error here actually.

155
00:07:29,380 --> 00:07:31,840
‫So it says I could not find that file,

156
00:07:31,840 --> 00:07:34,480
‫so this log is coming from this catch log here

157
00:07:34,480 --> 00:07:38,250
‫but then also at the same time it will throw an error.

158
00:07:38,250 --> 00:07:40,800
‫And if it throws an error, that will then mark

159
00:07:40,800 --> 00:07:43,330
‫this entire promise as rejected.

160
00:07:43,330 --> 00:07:47,410
‫And so that's why we then enter the catch log down here.

161
00:07:47,410 --> 00:07:50,290
‫Which will then, of course in turn

162
00:07:50,290 --> 00:07:52,690
‫trigger this console.log of this error.

163
00:07:52,690 --> 00:07:53,523
‫Okay?

164
00:07:53,523 --> 00:07:56,850
‫And this of course is a whole new layer of complexity.

165
00:07:56,850 --> 00:07:58,240
‫Okay.

166
00:07:58,240 --> 00:08:00,900
‫But it's still very important to understand how this works

167
00:08:00,900 --> 00:08:03,250
‫because it happens in real life all the time.

168
00:08:03,250 --> 00:08:06,160
‫So we need to return values from Async functions

169
00:08:06,160 --> 00:08:08,800
‫all the time and so it's important how you know

170
00:08:08,800 --> 00:08:11,880
‫how to actually handle these returned values.

171
00:08:11,880 --> 00:08:15,100
‫In this case, using DEN and catch.

172
00:08:15,100 --> 00:08:17,550
‫Now, the problem with this is that it mixes

173
00:08:17,550 --> 00:08:19,610
‫promises with Async/Await.

174
00:08:19,610 --> 00:08:21,780
‫So we have Async/Await up here,

175
00:08:21,780 --> 00:08:24,400
‫then all of a sudden we're being back to using

176
00:08:24,400 --> 00:08:26,440
‫DEN and catch down here.

177
00:08:26,440 --> 00:08:30,020
‫So let me actually show you another pattern of doing it.

178
00:08:30,020 --> 00:08:32,830
‫Okay, so let's come in our this part here

179
00:08:32,830 --> 00:08:35,630
‫not this way around, more like this.

180
00:08:35,630 --> 00:08:39,460
‫And so let's use Async/Await for implementing this logic.

181
00:08:39,460 --> 00:08:42,380
‫Now we don't want to create a whole new name function

182
00:08:42,380 --> 00:08:45,200
‫for this, and so we're going to use a well known pattern

183
00:08:45,200 --> 00:08:47,140
‫which I hope you know, which is an IIFE,

184
00:08:47,140 --> 00:08:49,730
‫so an immediately invoked function expression.

185
00:08:49,730 --> 00:08:53,363
‫Okay, so in parentheses, we define our function.

186
00:08:55,880 --> 00:08:58,610
‫Like this, and then we call it right away.

187
00:08:58,610 --> 00:08:59,870
‫Remember that?

188
00:08:59,870 --> 00:09:03,320
‫Then, in this case, since we want to use Async/Await,

189
00:09:03,320 --> 00:09:06,660
‫we also say that it's an Async function.

190
00:09:06,660 --> 00:09:09,070
‫Okay, and so this looks a bit weird here,

191
00:09:09,070 --> 00:09:11,940
‫but if you took for example my JavaScript course

192
00:09:11,940 --> 00:09:14,210
‫this will look familiar to you actually.

193
00:09:14,210 --> 00:09:16,700
‫Okay, so again, you declare a function

194
00:09:16,700 --> 00:09:19,860
‫inside of parentheses and then call it function right away.

195
00:09:19,860 --> 00:09:22,470
‫And so this way, you don't have to declare a

196
00:09:22,470 --> 00:09:26,190
‫whole name function again that you will to then call

197
00:09:26,190 --> 00:09:27,650
‫at some point later.

198
00:09:27,650 --> 00:09:29,087
‫Okay.

199
00:09:29,087 --> 00:09:31,070
‫Now since we're using Async/Await, we're using the

200
00:09:31,070 --> 00:09:34,623
‫try it catch pattern again, like before.

201
00:09:36,346 --> 00:09:39,660
‫So catch, have access to the error here,

202
00:09:39,660 --> 00:09:42,261
‫and we actually cannot omit this here.

203
00:09:42,261 --> 00:09:43,720
‫So even if we don't want to use this error,

204
00:09:43,720 --> 00:09:45,330
‫we still have to write it out here.

205
00:09:45,330 --> 00:09:46,163
‫Okay.

206
00:09:47,004 --> 00:09:48,420
‫In future versions of JavaScript this will be gone,

207
00:09:48,420 --> 00:09:51,310
‫but for now we need to do it like this.

208
00:09:51,310 --> 00:09:53,503
‫So this is where this error will be.

209
00:09:56,290 --> 00:09:59,213
‫And up here, we will have all these console.logs.

210
00:10:00,660 --> 00:10:01,593
‫This one,

211
00:10:03,870 --> 00:10:05,003
‫and this one.

212
00:10:06,749 --> 00:10:09,790
‫And now I hope you know how to actually get

213
00:10:09,790 --> 00:10:12,770
‫the value from the Async function.

214
00:10:12,770 --> 00:10:14,340
‫So you know how to do that.

215
00:10:14,340 --> 00:10:17,230
‫Actually I will pause the video and allow you to

216
00:10:17,230 --> 00:10:19,720
‫figure out how to do it on your own, okay?

217
00:10:19,720 --> 00:10:21,750
‫So take that small challenge and I'll be back

218
00:10:21,750 --> 00:10:22,583
‫in a second.

219
00:10:26,810 --> 00:10:30,270
‫So did you manage to get this string here,

220
00:10:30,270 --> 00:10:32,900
‫so this two ready into the x variable

221
00:10:32,900 --> 00:10:34,510
‫just like we had before?

222
00:10:34,510 --> 00:10:35,973
‫So just like this here?

223
00:10:37,030 --> 00:10:40,110
‫So it's just like we did before.

224
00:10:40,110 --> 00:10:44,380
‫You declare a variable and then you await the promise.

225
00:10:44,380 --> 00:10:48,090
‫And the promise, in this case, is get dog pic.

226
00:10:48,090 --> 00:10:48,923
‫Okay?

227
00:10:48,923 --> 00:10:51,260
‫So this function here is an Async function

228
00:10:51,260 --> 00:10:53,550
‫and so it returns a promise.

229
00:10:53,550 --> 00:10:55,850
‫And the result value of that promise

230
00:10:55,850 --> 00:10:58,100
‫is this value here, which is returned,

231
00:10:58,100 --> 00:11:01,400
‫and so by waiting for that value,

232
00:11:01,400 --> 00:11:03,880
‫the result will be this string.

233
00:11:03,880 --> 00:11:06,710
‫So we store that into x and then we can of course

234
00:11:06,710 --> 00:11:08,420
‫log it to console.

235
00:11:08,420 --> 00:11:12,260
‫So console.log x.

236
00:11:12,260 --> 00:11:14,980
‫Then in case there's an error, it will catch it

237
00:11:14,980 --> 00:11:16,890
‫and log it to the console here as well.

238
00:11:16,890 --> 00:11:19,230
‫If we give it a save now,

239
00:11:19,230 --> 00:11:22,555
‫then bam we get the error still because

240
00:11:22,555 --> 00:11:26,180
‫we had it here, so that part still works.

241
00:11:26,180 --> 00:11:30,490
‫Fixing it, saving it, and here we go.

242
00:11:30,490 --> 00:11:32,790
‫So it's working now as intended.

243
00:11:32,790 --> 00:11:35,470
‫But, again, with Async/Await it's a lot cleaner,

244
00:11:35,470 --> 00:11:38,433
‫looks a lot better and it's also easier to understand.

245
00:11:39,315 --> 00:11:42,577
‫And so we're not mixing Async/Await in one place here

246
00:11:42,577 --> 00:11:45,430
‫and then using DEN and catch down here

247
00:11:45,430 --> 00:11:47,543
‫like we had before with this piece of code.

248
00:11:47,543 --> 00:11:48,570
‫Okay?

249
00:11:48,570 --> 00:11:51,820
‫So in real life, this sort of stuff happens all the time.

250
00:11:51,820 --> 00:11:54,450
‫So we have an Async function and we called it

251
00:11:54,450 --> 00:11:57,500
‫from another Async function, and maybe we even

252
00:11:57,500 --> 00:11:59,660
‫called another Async function from that first

253
00:11:59,660 --> 00:12:02,270
‫Async function, and so we have a bunch of these

254
00:12:02,270 --> 00:12:05,420
‫Async functions interacting with each other.

255
00:12:05,420 --> 00:12:07,710
‫And so it's very important that you know

256
00:12:07,710 --> 00:12:08,900
‫how all of this works.

257
00:12:08,900 --> 00:12:11,070
‫And again to recap, the most important thing

258
00:12:11,070 --> 00:12:14,160
‫to remember is that an Async function automatically

259
00:12:14,160 --> 00:12:17,430
‫returns a promise, and that the value that we return

260
00:12:17,430 --> 00:12:20,800
‫from an Async function will be the result value

261
00:12:20,800 --> 00:12:21,890
‫of that promise.

262
00:12:21,890 --> 00:12:24,426
‫And so from there, we can simply handle it as yet

263
00:12:24,426 --> 00:12:25,810
‫another promise.

264
00:12:25,810 --> 00:12:29,070
‫And that's exactly what we did here by awaiting

265
00:12:29,070 --> 00:12:31,300
‫that first promise that we created.

266
00:12:31,300 --> 00:12:32,133
‫Okay?

267
00:12:32,133 --> 00:12:35,000
‫So please try to wrap your head around this

268
00:12:35,000 --> 00:12:37,010
‫and make sure that you really understand it.

269
00:12:37,010 --> 00:12:39,320
‫Because throughout the rest of the course I'm going

270
00:12:39,320 --> 00:12:42,270
‫to assume that you know how to work with this stuff.

271
00:12:42,270 --> 00:12:44,730
‫And that is exactly why I created this section,

272
00:12:44,730 --> 00:12:48,160
‫to kind of get it out of the way before we really start

273
00:12:48,160 --> 00:12:52,330
‫to work with no JS and express, and all this good stuff.

274
00:12:52,330 --> 00:12:53,250
‫Okay?

275
00:12:53,250 --> 00:12:56,178
‫So we're almost done with this section,

276
00:12:56,178 --> 00:12:57,720
‫there's just one small thing that I want to show you

277
00:12:57,720 --> 00:12:58,653
‫in the next video.