1
00:00:00,840 --> 00:00:05,460
We've just finished up on a long discussion about how our applications really architected.

2
00:00:05,490 --> 00:00:10,230
We spoke about how it's working behind the scenes and we also refactored some areas to make sure that

3
00:00:10,230 --> 00:00:14,310
our app works well and both the production and development environments.

4
00:00:14,340 --> 00:00:19,020
Now we're going to start to transition to moving on the front end of our application very shortly.

5
00:00:19,020 --> 00:00:24,150
But before we do there's one last thing I want to talk about that's going to be very applicable on both

6
00:00:24,150 --> 00:00:26,990
the back end and front end of our application.

7
00:00:27,120 --> 00:00:33,270
So we're going to be discussing is a little new piece of javascript syntax that's included with the

8
00:00:33,630 --> 00:00:36,900
2017 release of javascript.

9
00:00:36,900 --> 00:00:43,450
If you recall when we put together our services passport G-S file.

10
00:00:43,560 --> 00:00:47,190
So here is the services passport that japes file.

11
00:00:47,190 --> 00:00:53,220
When we were working on the Google strategy the Google strategy we put together that second argument

12
00:00:53,220 --> 00:00:56,960
to the strategy which was the callback function inside of here.

13
00:00:56,970 --> 00:01:03,060
We made use of promises with our request to the database to handle this sort of asynchronous nature

14
00:01:03,060 --> 00:01:04,350
of our code.

15
00:01:04,350 --> 00:01:09,420
Now when we put this code together I said several times hey if you don't really know promises that's

16
00:01:09,420 --> 00:01:11,990
totally fine because we're going to refactor this anyways.

17
00:01:12,030 --> 00:01:13,610
This is what I'm talking about.

18
00:01:13,670 --> 00:01:13,920
OK.

19
00:01:13,950 --> 00:01:17,940
We're going to do or we're going to learn this new syntax right now and then we're going to come back

20
00:01:17,940 --> 00:01:23,340
to this snippet of code and refactor it to use this new type of syntax that's going to allow us to kind

21
00:01:23,340 --> 00:01:27,110
of skirt really dealing with promises directly.

22
00:01:27,120 --> 00:01:32,310
Now this new syntax that we're going to use is going to be used on both the back end and the front ends

23
00:01:32,310 --> 00:01:33,230
of our application.

24
00:01:33,240 --> 00:01:37,800
And so obviously it's really important that we have a reasonable understanding of what this new syntax

25
00:01:37,800 --> 00:01:39,210
is doing for us.

26
00:01:39,710 --> 00:01:40,240
OK.

27
00:01:40,500 --> 00:01:42,700
So here's how we're going to learn about it.

28
00:01:42,750 --> 00:01:49,980
We are going to create a new little snippet of code just a little test function completely outside of

29
00:01:49,980 --> 00:01:51,180
our project.

30
00:01:51,180 --> 00:01:54,690
So we're going to write a little code completely outside of our project.

31
00:01:54,930 --> 00:01:56,030
We're going to test it.

32
00:01:56,040 --> 00:01:57,900
We're going to work it with it a little bit.

33
00:01:57,900 --> 00:02:00,260
We're going to learn how this new syntax works.

34
00:02:00,420 --> 00:02:05,730
And then after we finish that we will come back to this arrow function right here and refactor it to

35
00:02:05,730 --> 00:02:07,650
use this new syntax.

36
00:02:07,650 --> 00:02:09,940
So that's our goal.

37
00:02:09,960 --> 00:02:15,770
So with that in mind I'm going to create a new file inside of my code editor.

38
00:02:15,840 --> 00:02:18,130
We're not going to save this file to our project.

39
00:02:18,180 --> 00:02:20,040
So you can write this code anywhere you want.

40
00:02:20,040 --> 00:02:21,230
We're not going to save it.

41
00:02:21,300 --> 00:02:28,380
This is just a location where we can write a little bit of sample code that's all mixture I'm writing

42
00:02:28,380 --> 00:02:30,070
in javascript like so.

43
00:02:30,610 --> 00:02:30,990
OK.

44
00:02:30,990 --> 00:02:33,480
So this is we're going to write our sample code now.

45
00:02:33,810 --> 00:02:34,540
I'm having.

46
00:02:34,590 --> 00:02:37,800
This is going to be like a little bit tough to go through because we're going to kind of cover a couple

47
00:02:37,800 --> 00:02:39,810
of different topics at once.

48
00:02:39,930 --> 00:02:42,960
But hey just believe me at the end everything will become clear.

49
00:02:42,960 --> 00:02:49,560
So for this sample snippet of code for this little test function I'm going to say that we want to write

50
00:02:49,590 --> 00:02:54,990
a function to retrieve a blob of Jason.

51
00:02:55,080 --> 00:02:58,800
Some of the words make an Ajax request.

52
00:02:58,950 --> 00:03:05,070
So I want to write a function that's going to make an Ajax request to make the actual request.

53
00:03:05,070 --> 00:03:15,520
We are going to use the fetch so use the fetch function the fetch function is available with default

54
00:03:15,520 --> 00:03:19,610
javascript as a part of the standard library as of E.S. 2015.

55
00:03:19,810 --> 00:03:26,140
So we can use the fetch function to make Ajax requests to arbitrary end points from any web server out

56
00:03:26,140 --> 00:03:27,450
in existence.

57
00:03:27,460 --> 00:03:33,010
So in short I want to write a function that's going to make an Ajax request to receive some amount of

58
00:03:33,010 --> 00:03:39,340
information and I want internally to use the fetch API or the fetch function.

59
00:03:39,340 --> 00:03:44,900
So before we make an actual Ajax request we have to have an actual u r l to make the request to.

60
00:03:45,190 --> 00:03:50,940
So let's figure that part out first and then we'll write this actual function inside my browser.

61
00:03:51,640 --> 00:04:01,330
I'm going to open up a new tab and navigate to rally coding doc Roku app dot com slash API slash music

62
00:04:01,390 --> 00:04:06,400
albums and all pieces inside my code editor so you can read it very easily in just a second.

63
00:04:06,400 --> 00:04:12,800
So as you can see if we make a request to this route right here we'll get back some arbitrary blob of

64
00:04:12,920 --> 00:04:18,730
some so I can go over to my code editor and just so you can read it easily.

65
00:04:18,730 --> 00:04:20,800
I'm going to paste the link right here.

66
00:04:20,800 --> 00:04:26,560
So make sure that you can access this link and when you access it you should see a big old blob of sun

67
00:04:26,640 --> 00:04:28,110
appear in the browser.

68
00:04:28,480 --> 00:04:32,280
One thing I want to point out in particular notice that it's Heroku app dot com.

69
00:04:32,290 --> 00:04:33,950
It's not Heroku dot com.

70
00:04:34,030 --> 00:04:34,920
OK.

71
00:04:35,620 --> 00:04:35,920
All right.

72
00:04:35,920 --> 00:04:37,790
So we've got our you are.

73
00:04:38,170 --> 00:04:39,910
We are going to write our function now.

74
00:04:39,970 --> 00:04:43,240
And internally it's going to use the fetch function.

75
00:04:43,570 --> 00:04:45,610
So I'm going to write my function.

76
00:04:45,610 --> 00:04:52,630
I'm going to call it fetch albums because we are fetching data on some music albums and inside this

77
00:04:52,630 --> 00:04:59,850
function we will use the fetch API to make a request you are route right here.

78
00:05:00,900 --> 00:05:02,160
Now here's the catch.

79
00:05:02,160 --> 00:05:08,040
Whenever we make a request with fetch fetch returns a promise.

80
00:05:08,040 --> 00:05:13,820
That promise is resolved with an object that represents the underline request.

81
00:05:13,890 --> 00:05:19,710
Now remember any time we work with a promise to get kind of a little notification or a little callback

82
00:05:19,920 --> 00:05:29,130
that the promise has been resolved we'd chain on a dot then statement like so this then will be called

83
00:05:29,400 --> 00:05:33,550
with the request coming from the original fecche call right here.

84
00:05:33,810 --> 00:05:41,580
So we usually receive that as an argument called rez short response and then to read the actual Jaison

85
00:05:41,660 --> 00:05:45,960
data that we retrieved from this API from this route right here.

86
00:05:46,130 --> 00:05:52,710
We call rez Jaison like so and make sure you get the set of parentheses.

87
00:05:53,300 --> 00:05:59,300
So this is kind of how the fecche API works and returns this response object that represents the underlying

88
00:05:59,300 --> 00:06:05,300
requests for the underlying response to actually work with the real data that got returned.

89
00:06:05,300 --> 00:06:12,050
We have to call redstart Jaison which returns a promise of its own that is resolved after the sun in

90
00:06:12,050 --> 00:06:14,530
the request is ready for us to work with.

91
00:06:14,540 --> 00:06:19,630
So to get access to the actual Jaison is resolved or that is actually returned with this request would

92
00:06:19,640 --> 00:06:26,240
change on a another then that will be called with the case on data that we care about and so at that

93
00:06:26,240 --> 00:06:29,580
point we can do whatever we want with the information that was returned.

94
00:06:29,630 --> 00:06:33,070
So in this case I'll just cancel it like so.

95
00:06:33,620 --> 00:06:35,720
Finally underneath the function declaration.

96
00:06:35,750 --> 00:06:38,560
I'll save fetch albums like that.

97
00:06:39,220 --> 00:06:42,950
OK so now I want to test out this little code snippet inside the browser.

98
00:06:42,950 --> 00:06:44,390
Now for we test it.

99
00:06:44,480 --> 00:06:51,050
I want to tell you right now this snippet of code is only going to work for you if you are using a relatively

100
00:06:51,050 --> 00:06:54,100
modern browser that has support for fetch.

101
00:06:54,140 --> 00:06:56,440
So if you are using Chrome you're going to be fine.

102
00:06:56,540 --> 00:07:03,660
If you're using Internet or Microsoft edge you're probably would be OK if you're using IEEE ten or nine

103
00:07:03,680 --> 00:07:04,530
for some reason.

104
00:07:04,550 --> 00:07:06,750
You're probably going to see an error message when we try this out.

105
00:07:06,830 --> 00:07:10,840
OK so just now we're going to copy this entire blob right here.

106
00:07:10,850 --> 00:07:12,840
I will change back over to the browser.

107
00:07:12,950 --> 00:07:15,600
I'm going to open up the developer console.

108
00:07:16,010 --> 00:07:17,600
I'm going to go to the counsel tab.

109
00:07:17,720 --> 00:07:23,630
I will pass the sniff bit of code or run it and then after a little pause I should see a console log

110
00:07:23,660 --> 00:07:27,150
with the five albums that are returned from the CPI.

111
00:07:27,440 --> 00:07:34,340
OK all right so at this point we've looked at and we've seen how traditional fecche requests work.

112
00:07:34,550 --> 00:07:36,740
Something that's probably not that unusual to you.

113
00:07:37,100 --> 00:07:43,010
So at this point in time we have essentially made some type of asynchronous request that returns a promise

114
00:07:43,760 --> 00:07:45,980
when the request is successful.

115
00:07:46,130 --> 00:07:49,580
We can change or we can change it then and pass the function.

116
00:07:49,580 --> 00:07:55,400
That function will be called if the request is successfully resolved so that then is essentially our

117
00:07:55,400 --> 00:08:00,410
opportunity to get a little callback something that says hey responses back here you can now work with

118
00:08:00,410 --> 00:08:01,370
it.

119
00:08:01,370 --> 00:08:04,850
Now applying this to the actual fetch call we just did.

120
00:08:04,850 --> 00:08:09,530
So we called fetch that returned promise and we changed on the first dot.

121
00:08:09,560 --> 00:08:15,920
Then because Vetri resolves with an object representing the underlying request to get the actual data

122
00:08:15,950 --> 00:08:21,620
we have to call resident Giese on that returns a nother promise and so to get a little notification

123
00:08:21,620 --> 00:08:27,590
when that promise is resolved we'd chain on a second then which we can then use to get access to the

124
00:08:27,590 --> 00:08:29,370
real underlying data.

125
00:08:29,600 --> 00:08:34,790
So hopefully at this point I just want to say you know make sure we're really on the same page on fetch.

126
00:08:34,790 --> 00:08:38,090
Make sure we both understand why there's the two then statements.

127
00:08:38,090 --> 00:08:42,170
I think that at this point we can agree and say OK yeah this makes sense we understand what's going

128
00:08:42,170 --> 00:08:42,670
on.

129
00:08:43,040 --> 00:08:46,570
So now let's do a little refactor to this function.

130
00:08:46,670 --> 00:08:48,460
That's going to make use of this new.

131
00:08:48,500 --> 00:08:51,570
Yes 20:17 syntax.

132
00:08:52,430 --> 00:08:59,780
Now the sole purpose of this new yes 20:17 syntax is just to make working with promises a little bit

133
00:08:59,810 --> 00:09:02,320
easier and a little bit more straightforward.

134
00:09:02,510 --> 00:09:05,140
Behind the scenes we're still working with promises.

135
00:09:05,240 --> 00:09:07,860
Fetch is still going to return a promise.

136
00:09:08,180 --> 00:09:13,670
We still are technically defining a function kind of we're still defining a block of code that will

137
00:09:13,670 --> 00:09:20,490
be only executed after the fetch statement is read or after the request is resolved.

138
00:09:20,540 --> 00:09:24,320
So we're still working with promises behind the scenes.

139
00:09:24,320 --> 00:09:31,670
The only difference is that this new E-S 20:17 syntax makes it visually look to our eyes like your eyes

140
00:09:31,670 --> 00:09:36,200
and my eyes like we are writing code that is a little bit more synchronous in nature.

141
00:09:36,200 --> 00:09:40,580
OK so let's Jorie factor and see what it looks like.

142
00:09:40,700 --> 00:09:46,070
I'm going to start off by copying the fecche albums function and then pasting it right underneath the

143
00:09:46,070 --> 00:09:50,710
existing one just so we can kind of compare and contrast the two.

144
00:09:50,730 --> 00:09:56,240
So I'm going to comment out the existing one and then we're going to do our factor to use this new syntax

145
00:09:56,630 --> 00:09:57,660
on the new function.

146
00:09:57,680 --> 00:09:59,410
Or on this copy of it.

147
00:09:59,990 --> 00:10:00,320
OK.

148
00:10:00,330 --> 00:10:03,930
The new syntax just in case I didn't actually mention it is called async.

149
00:10:03,950 --> 00:10:09,680
Oh wait it is specifically for handling a synchronous code inside of any type of function.

150
00:10:09,680 --> 00:10:12,400
So here is how we use it we'll do it step by step.

151
00:10:12,410 --> 00:10:18,080
First we identify the function inside of our code base that contains some type of asynchronous requests

152
00:10:18,080 --> 00:10:20,600
or some type of asynchronous operation.

153
00:10:20,820 --> 00:10:22,930
And so in this case we've got one function.

154
00:10:22,940 --> 00:10:24,720
Here it is right here.

155
00:10:24,950 --> 00:10:29,020
So we have identified the function that contains some asynchronous code.

156
00:10:29,480 --> 00:10:35,560
Step one is to put the async keyword in front of that function declaration.

157
00:10:35,560 --> 00:10:42,120
So I'm going to say async space function this essentially tells our javascript interpreter that the

158
00:10:42,120 --> 00:10:47,070
function that we are about to declare contains some asynchronous code.

159
00:10:47,070 --> 00:10:53,320
Now step two is to identify all the different promises that are created within that function.

160
00:10:53,400 --> 00:10:55,700
In this case we have two different promises.

161
00:10:55,710 --> 00:10:58,690
We have the one that is being created by calling Fettes right here.

162
00:10:58,890 --> 00:11:04,470
And then we have the second promise that is being created by calling redstart Jaison in front of each

163
00:11:04,470 --> 00:11:08,520
of those promises we're going to add the a weight keyword.

164
00:11:09,030 --> 00:11:15,480
So going to find fetch I mean to say oh wait I'm going to find the red dot Jay song I'm going to delete

165
00:11:15,840 --> 00:11:22,260
everything around it and condensed down to be just restaurant Jaison and then put the Awake key word

166
00:11:22,260 --> 00:11:29,640
in front that finally I'm going to assign the resolve value of fetch and juice on to some intermediate

167
00:11:29,640 --> 00:11:30,500
values.

168
00:11:30,750 --> 00:11:39,330
So in front of fetch I'll say Konst rez equals a weight fetch and I'll say Konst Jaison equals a wage

169
00:11:39,420 --> 00:11:40,720
restaurant Jason.

170
00:11:41,040 --> 00:11:46,870
And then finally I will refactor the rest of the function to look essentially synchronous in nature.

171
00:11:46,950 --> 00:11:54,080
So delete the entire Then statement down here and say simply Konst a log dot Jaison like so.

172
00:11:54,870 --> 00:11:57,990
And that's essentially the entire refactor right there.

173
00:11:57,990 --> 00:12:03,660
So again we first off identify any function our code base that uses some type of asynchronous code or

174
00:12:03,660 --> 00:12:05,610
some type of promise inside of it.

175
00:12:05,610 --> 00:12:12,530
We put down the async Ewert we put the await key word in front of any statement that produces a promise.

176
00:12:12,840 --> 00:12:19,260
And then in front of a weight the promise we put down some variable to assign the resolve result of

177
00:12:19,260 --> 00:12:20,570
the promise too.

178
00:12:20,580 --> 00:12:27,390
So remember before fecche was being resolved with the response we are now signing that to the rest variable

179
00:12:27,390 --> 00:12:31,730
right here await wait Jaison was being resolved with some amount of Jaison.

180
00:12:31,770 --> 00:12:35,060
So we are assigning that to the Jason on variable right here.

181
00:12:35,130 --> 00:12:41,580
Now when we compare these two snippets of code I can very easily say that this one is a little bit easier

182
00:12:41,580 --> 00:12:43,090
to understand what's going on.

183
00:12:43,230 --> 00:12:43,710
Right.

184
00:12:43,740 --> 00:12:49,100
If you forget this entire like a single weight stuff if you just forget the fact that it's new.

185
00:12:49,140 --> 00:12:56,370
Just looking at these two functions I think it's very easy to say this is easier to understand as far

186
00:12:56,370 --> 00:13:01,480
as like kind of what it's doing we're essentially making request assigned to this very well calling

187
00:13:01,500 --> 00:13:07,110
Jaison or the Jason function on that variable assigning the result to a song and then we cancel log

188
00:13:07,110 --> 00:13:08,340
out the response.

189
00:13:09,350 --> 00:13:12,850
This snippet up here unless you really know what's going on with promises.

190
00:13:12,890 --> 00:13:14,970
It's a little bit harder to understand.

191
00:13:14,990 --> 00:13:19,750
And one of the hardest parts understand is understanding that the promise that gets returned from resident

192
00:13:19,760 --> 00:13:23,710
Jason right here has to be resolved before the second dot.

193
00:13:23,750 --> 00:13:29,030
Then Stayton is called like that's a very intricate detail promises and how promises work.

194
00:13:29,030 --> 00:13:35,770
So again we make use of this syncopate syntax just to make our code a little bit more legible.

195
00:13:35,830 --> 00:13:39,560
Now behind the scenes all the same promise stuff is still going on.

196
00:13:39,770 --> 00:13:43,550
The interpreter is still going to make the Fettes request right here.

197
00:13:43,550 --> 00:13:48,040
And then it's not going to execute any other code inside the function.

198
00:13:48,200 --> 00:13:52,340
So we're still going to make that request right here and then essentially the interpreter is going to

199
00:13:52,340 --> 00:13:53,970
go off and do some other work.

200
00:13:53,990 --> 00:13:58,100
It's not going to immediately just like pause an execution right here.

201
00:13:58,190 --> 00:13:59,510
It's not going to actually.

202
00:13:59,510 --> 00:14:02,800
Oh wait we are not like sleeping or anything like that.

203
00:14:02,810 --> 00:14:05,590
Everything is still working the way that it was before.

204
00:14:05,720 --> 00:14:10,880
We are just using a slightly different syntax.

205
00:14:10,880 --> 00:14:11,310
OK.

206
00:14:11,480 --> 00:14:13,400
So let's now test this out.

207
00:14:13,400 --> 00:14:16,880
I'm going to copy this entire snippet right here.

208
00:14:16,880 --> 00:14:22,580
And again if you are not using an up to date version of chrome if you're using an old version of Internet

209
00:14:22,580 --> 00:14:27,590
Explorer if you're using an older version of Firefox if you're using Safari this code right here is

210
00:14:27,590 --> 00:14:29,440
probably going to throw an air for you.

211
00:14:29,690 --> 00:14:31,340
So you have to be using Chrome.

212
00:14:31,340 --> 00:14:34,620
And they recently up to date version of chrome for this code to work.

213
00:14:35,090 --> 00:14:37,130
So I'm going to copy this code.

214
00:14:37,130 --> 00:14:42,590
I'm going to go back over to my console and to clear out the log.

215
00:14:45,040 --> 00:14:50,280
And I'll paste it and run it and then just as before I still get out the console log.

216
00:14:50,320 --> 00:14:53,020
So clearly the two are equivalent in behavior.

217
00:14:53,050 --> 00:14:55,480
They work essentially the same way.

218
00:14:55,750 --> 00:15:01,570
We have only added in this new type of syntax for handling these asynchronous requests.

219
00:15:01,570 --> 00:15:07,360
Now the last thing I want to say here is that we are not only restricted to using the async await syntax

220
00:15:07,660 --> 00:15:10,540
with functions that are declared using the function keyword.

221
00:15:10,540 --> 00:15:13,790
We can also use aero functions if we choose.

222
00:15:13,840 --> 00:15:17,130
So let's refactor this to use an arrow function instead.

223
00:15:17,650 --> 00:15:28,030
I'll say Konst fetch albums equals a wait and then I place the function that I want to mark as being

224
00:15:28,090 --> 00:15:29,370
a synchronous nature.

225
00:15:29,410 --> 00:15:32,220
I put away my mistake state to be async like so.

226
00:15:32,530 --> 00:15:38,240
So we say async and then the function that is going to be containing some amount of asynchronous code.

227
00:15:38,830 --> 00:15:42,560
So I'm going to now copy all this when I go back over to the browser.

228
00:15:42,580 --> 00:15:47,510
I am going to refresh the page if I pasted the code that we just added and execute it.

229
00:15:47,530 --> 00:15:52,120
We would get a little bit of an error because I'm using the Konst key word here and whenever we use

230
00:15:52,120 --> 00:15:57,040
Konski word remember we can only declare the variable once and so if we were out right now we would

231
00:15:57,040 --> 00:15:58,220
see a little error message.

232
00:15:58,270 --> 00:16:00,430
But that's because of the Konst keyword.

233
00:16:00,790 --> 00:16:02,790
So refresh the entire page.

234
00:16:02,790 --> 00:16:09,480
I will then paste that statement and we still get the same result as before we get.

235
00:16:09,490 --> 00:16:11,750
So that's pretty much it for the async wait syntax.

236
00:16:11,770 --> 00:16:17,360
Again the takeaway here is that it is still behaving the exact same way behind the scenes.

237
00:16:17,380 --> 00:16:23,320
The only difference is that it gives us this slightly improved syntax that makes our code look a little

238
00:16:23,320 --> 00:16:25,250
bit more synchronous in nature.

239
00:16:25,270 --> 00:16:26,380
Now before we take a pause.

240
00:16:26,380 --> 00:16:33,550
One last thing I want to do I want to open up the Babel G-S repo or Simmie REPL Songun navigate to Babel

241
00:16:33,650 --> 00:16:35,490
JIANG-STEIN IO.

242
00:16:35,680 --> 00:16:36,660
I'm going to find the.

243
00:16:36,670 --> 00:16:38,760
Try it now link.

244
00:16:38,990 --> 00:16:45,700
So try it out right here and then this gives us a little tool where we can paste some yes 20 anything.

245
00:16:45,740 --> 00:16:51,600
So yes 20:17 whenever you want code on here and then see the transpired result on the right hand side.

246
00:16:51,680 --> 00:16:57,740
So I'm going to paste the code that we just wrote and when I do so you'll notice that it like actually

247
00:16:57,740 --> 00:17:01,030
executes the code if you have evaluate appeared checked.

248
00:17:01,490 --> 00:17:05,780
But when I paste the code we can inspect the result over here.

249
00:17:05,780 --> 00:17:09,490
So this is what you actually see after that advantage.

250
00:17:09,500 --> 00:17:16,390
After that a syncopate syntax has been parsed by Babel and translated into compatible S-5 code.

251
00:17:16,460 --> 00:17:22,100
So over on the right hand side you'll see that all of this async Kuwait stuff gets massively expanded

252
00:17:22,250 --> 00:17:27,610
over here like tremendous amount of code is generated by using that async quite syntax.

253
00:17:27,740 --> 00:17:33,460
And this is everything that it takes to actually do this kind of fancy syntax.

254
00:17:33,470 --> 00:17:37,140
Now one thing you might notice in here is this function called async generator.

255
00:17:37,190 --> 00:17:42,650
If you look very carefully at it and it's one very long line you can see that it is still creating a

256
00:17:42,650 --> 00:17:44,800
promise behind the scenes.

257
00:17:44,810 --> 00:17:50,830
So here is like new promise and it is still like essentially doing something with the promise.

258
00:17:51,090 --> 00:17:52,370
So your like promised resolve.

259
00:17:52,370 --> 00:17:53,770
Blah blah blah blah blah.

260
00:17:54,170 --> 00:17:55,150
And all this stuff.

261
00:17:55,160 --> 00:17:57,400
So there's still promises behind the scenes.

262
00:17:57,500 --> 00:18:00,230
But at the end of the day it's really just cause.

263
00:18:00,380 --> 00:18:04,560
Essentially at the end of the day remember we are just using some syntactic sugar.

264
00:18:04,580 --> 00:18:09,080
It is not necessarily transforming the way that javascript is working right now.

265
00:18:09,680 --> 00:18:11,930
OK so enough of talking about this.

266
00:18:11,990 --> 00:18:15,310
Again we're going to be making use of async await throughout this course.

267
00:18:15,350 --> 00:18:19,820
A tremendous amount and in fact we're probably not going use promises again at all.

268
00:18:19,820 --> 00:18:25,370
We might kind of write out the next request or two as a promise and then refactor it to use async wait

269
00:18:25,400 --> 00:18:26,870
just to make sure we're on the same page.

270
00:18:26,930 --> 00:18:29,990
But in general we will use async away a lot.

271
00:18:30,170 --> 00:18:34,280
So at this point I want to take a break when we come back to the next section.

272
00:18:34,310 --> 00:18:40,300
We're going to go back to that passport file and we're going to refactor all of this database queries

273
00:18:40,300 --> 00:18:43,740
stuff to instead use the new async await syntax.

274
00:18:43,790 --> 00:18:44,750
So a quick break.

275
00:18:44,750 --> 00:18:47,090
We'll come back and do a little refactor.

276
00:18:47,250 --> 00:18:48,410
So see you in just a second.