1
00:00:01,210 --> 00:00:08,290
Ah the new feature in javascript that everyone is talking about lately 'Async Await'. In this video

2
00:00:08,290 --> 00:00:12,830
we're going to learn what all the hype is about. To get started

3
00:00:12,890 --> 00:00:19,880
You must first know that Async Await is part of ES8 and is built on top of promises.

4
00:00:20,000 --> 00:00:22,280
If you aren't sure what promises are.

5
00:00:22,280 --> 00:00:25,840
Make sure you check out that video first.

6
00:00:25,960 --> 00:00:34,420
Now underneath the hood an async function is a function that returns a promise. But the benefit of Async

7
00:00:34,430 --> 00:00:37,710
Await is that it makes code easier to read.

8
00:00:38,110 --> 00:00:39,430
Let me show you what I mean.

9
00:00:39,760 --> 00:00:44,750
This is a promise that we just made up.

10
00:00:44,770 --> 00:00:47,340
It's a move player function.

11
00:00:47,350 --> 00:00:53,470
Imagine we're designing a game and it has the distance plus the direction that the player moves and

12
00:00:53,470 --> 00:00:59,560
if we want to change these we have 'move player' '.then',  'move player' again, 'move player' again.

13
00:00:59,650 --> 00:01:00,810
'move player' again.

14
00:01:01,150 --> 00:01:03,670
Now this is asynchronous code.

15
00:01:03,730 --> 00:01:06,200
We know that move player is going to happen, then

16
00:01:06,280 --> 00:01:08,390
This is going to happen, then this, then this.

17
00:01:08,500 --> 00:01:16,780
If we want to have any sort of action within here we can wrap it in brackets and console log that extraction.

18
00:01:16,780 --> 00:01:21,370
All things that you can do with promises. with async await

19
00:01:21,410 --> 00:01:24,240
It would look something like this.

20
00:01:27,300 --> 00:01:28,420
What's going on here.

21
00:01:29,770 --> 00:01:37,660
The big benefit of async await is that it makes code easier to read and I know you're probably not thinking

22
00:01:37,660 --> 00:01:41,230
that right now because this is new syntax but just give it a chance.

23
00:01:41,240 --> 00:01:48,850
The goal with async await is to make code look synchronous - a code that's asynchronous look synchronous.

24
00:01:48,850 --> 00:01:54,890
Now if you remember a promise in javascript is kind of like an 'I owe you'.

25
00:01:55,020 --> 00:01:58,180
I promise to return something to you in the future.

26
00:01:58,990 --> 00:02:05,140
Something like an AJAX call resizing an image getting some information from a database.

27
00:02:05,140 --> 00:02:07,040
These are all things that take time.

28
00:02:07,180 --> 00:02:11,910
Instead of waiting around on them we want to continue on with our lives and just have it

29
00:02:11,920 --> 00:02:13,510
Let us know when it's done.

30
00:02:13,780 --> 00:02:18,220
But we're going to keep working on our own stuff whil it's doing that in the background.

31
00:02:18,700 --> 00:02:22,290
We do it this way because that is how javascript works.

32
00:02:22,330 --> 00:02:30,010
If you remember in our "How Javascript Works" video we talked about javascript being single threaded. For

33
00:02:30,010 --> 00:02:34,270
our programs to be efficient we can use asynchronous programming to do these things.

34
00:02:34,450 --> 00:02:38,670
So promises help us solve this and it looked like this.

35
00:02:39,560 --> 00:02:45,660
Now remember what I said at the beginning async await code are just promises.

36
00:02:45,770 --> 00:02:53,960
Underneath the hood we call this syntactic sugar something that still does the same thing but is just

37
00:02:54,170 --> 00:02:56,930
different syntax to make it look prettier.

38
00:02:56,960 --> 00:03:06,940
Syntactic sugar. And promises have this .then that you keep having to chain async on the other hand

39
00:03:06,940 --> 00:03:12,420
has this async word in front of it and some await key words.

40
00:03:12,700 --> 00:03:15,180
So let's go through what all this means.

41
00:03:15,980 --> 00:03:20,560
Although these two things do the same with the playerStart function.

42
00:03:20,560 --> 00:03:25,650
We first declare a function as async. We lead javascript know-

43
00:03:25,660 --> 00:03:32,220
"Hey this is an async function." And we declare it with the word function and then a function name.

44
00:03:32,270 --> 00:03:39,800
We now can do anything we want inside of this function but we have access to a new word because we used

45
00:03:39,890 --> 00:03:42,460
the async word to define this function.

46
00:03:42,620 --> 00:03:50,350
We have the 'await' keyword and this keyword says- and we can remove this for now.

47
00:03:51,330 --> 00:03:57,890
This 'await' key word says "hey pause this function until I have something for you."

48
00:03:58,920 --> 00:04:01,580
So we're awaiting the response.

49
00:04:02,360 --> 00:04:08,900
And you can use this 'await' keyword in front of any function that returns a promise which we know that

50
00:04:08,910 --> 00:04:10,050
move player does.

51
00:04:10,220 --> 00:04:16,760
And once the promise is resolved then the function moves to the next line and it awaits the next move

52
00:04:17,029 --> 00:04:20,769
and awaits the next move and awaits the next move.

53
00:04:20,839 --> 00:04:27,200
Now the cool thing about this is that instead of chaining it like this I can now assign just like asynchronous

54
00:04:27,410 --> 00:04:34,380
programming, variable first to await this and I can assign second

55
00:04:37,770 --> 00:04:46,070
to await this and first and second will have the result of each function but in a variable.

56
00:04:46,150 --> 00:04:48,220
So it looks very synchronous.

57
00:04:48,250 --> 00:04:50,980
You're not using '.then' you're not chaining.

58
00:04:50,980 --> 00:04:54,920
You just have simple synchronous programming you're waiting for this to happen.

59
00:04:54,930 --> 00:04:56,590
Then waiting for this to happen.

60
00:04:57,130 --> 00:05:02,720
But let's use a more realistic example so we really understand this.

61
00:05:02,920 --> 00:05:07,860
If we use our fetch function and again if you remember fetch function.

62
00:05:08,050 --> 00:05:10,010
That's a promise.

63
00:05:11,190 --> 00:05:15,270
You see that we get a promise.

64
00:05:15,430 --> 00:05:26,070
So with the fetch function if we use our favorite API resource, json placeholder. Let's grab the users

65
00:05:26,080 --> 00:05:34,490
here so this users end point. If we want to fetch something we did return a promise so we would do a

66
00:05:34,490 --> 00:05:34,800
.then

67
00:05:34,810 --> 00:05:40,450
response we would have to run it through.

68
00:05:40,660 --> 00:05:41,540
json

69
00:05:42,780 --> 00:05:51,990
And then finally .then console.log the response or the data that we get.

70
00:05:51,990 --> 00:06:01,280
So again if I copy and paste this into our console, we get a promise that's pending initially then it gets

71
00:06:01,280 --> 00:06:06,050
resolved and I get my users.

72
00:06:06,080 --> 00:06:09,010
Now how can we turn this into an async function.

73
00:06:09,080 --> 00:06:16,060
Again the same feature will work the same but it will look a little bit cleaner.

74
00:06:16,210 --> 00:06:18,340
It will be syntactic sugar.

75
00:06:18,620 --> 00:06:27,950
Well if you remember we have to declare a function with async keyword and this function will say

76
00:06:28,400 --> 00:06:32,150
fetchUsers and fetch users

77
00:06:32,430 --> 00:06:38,740
Will have this inside of it.

78
00:06:38,980 --> 00:06:43,580
But we can now use in front of anything that returns a promise.

79
00:06:43,640 --> 00:06:46,290
The 'await' keyword.

80
00:06:46,770 --> 00:06:52,050
So now this function is going to pause until we get a response from fetch.

81
00:06:52,100 --> 00:06:57,150
So I can say const 'response' 

82
00:06:59,060 --> 00:07:13,750
equals await the fetch call. And now instead of using the .then I can say const 'data' equals 'await'

83
00:07:14,710 --> 00:07:21,790
'response.json()' because again 'response.json' returns a promise so I can put the 'await' keyword. And

84
00:07:21,790 --> 00:07:27,140
then finally I can just 'console.log(data)'

85
00:07:29,120 --> 00:07:31,570
All right let's copy and paste this and see if it works.

86
00:07:35,610 --> 00:07:36,100
All right.

87
00:07:36,150 --> 00:07:42,980
Now I call the fetchUsers function which is the async function.

88
00:07:43,160 --> 00:07:45,320
And I made a bit of an error here.

89
00:07:45,350 --> 00:07:51,050
There's no response it's 'resp' short form response. There you go let's try that again.

90
00:07:51,620 --> 00:07:53,460
So let's refresh that.

91
00:07:54,510 --> 00:08:01,990
Copy and paste, run the fetchUsers function and look at that.

92
00:08:02,130 --> 00:08:05,940
We have our promise that got resolved.

93
00:08:06,240 --> 00:08:18,200
And we have our users nothing different from the promise but now we have a nice step by step 	

94
00:08:18,210 --> 00:08:21,210
looking code that says fetch this.

95
00:08:21,210 --> 00:08:29,450
Get a response, then run it through the json method and then console log 'data'. And you might be thinking

96
00:08:29,450 --> 00:08:34,070
to yourself is this actually prettier than what we had before.

97
00:08:34,370 --> 00:08:36,470
Let's remember what we had before.

98
00:08:43,919 --> 00:08:45,590
This is what we had before.

99
00:08:45,780 --> 00:08:47,750
This is what we have now.

100
00:08:48,630 --> 00:08:52,760
And some of you might argue that the first promise way it looks better.

101
00:08:53,130 --> 00:08:53,810
And you know what.

102
00:08:53,850 --> 00:08:57,030
It's personal preference and this is a simple example.

103
00:08:57,040 --> 00:09:00,100
So there are times where this actually looks a lot cleaner.

104
00:09:00,360 --> 00:09:07,340
But I'm a big believer in doing what's easiest to read and understand for you and your teammates.

105
00:09:07,560 --> 00:09:12,850
Let's do one last example. Let's do something even more realistic.

106
00:09:12,960 --> 00:09:20,130
Let's say that we have a list of URLs and this time we have the users, posts and albums from the

107
00:09:20,130 --> 00:09:22,390
json placeholder API.

108
00:09:23,660 --> 00:09:25,810
And we want to run through them all.

109
00:09:25,850 --> 00:09:30,270
If you remember in our promises video we had something like this.

110
00:09:30,500 --> 00:09:32,550
Let's remove this so you can see it better.

111
00:09:32,870 --> 00:09:34,010
So we had something like this.

112
00:09:34,010 --> 00:09:43,900
We did promise.all - we mapped through the URLs. We fetched the URLs and responded with the JSON

113
00:09:45,400 --> 00:09:54,020
and then we returned the array and the array had users, posts, albums and we also did a .catch.

114
00:09:54,030 --> 00:10:03,440
So again just to make sure that this works going to copy this put it into our console and we see that

115
00:10:03,440 --> 00:10:06,860
we get our users, posts and albums data.

116
00:10:06,860 --> 00:10:07,990
So that's working.

117
00:10:08,270 --> 00:10:10,830
Let's convert this into an async function.

118
00:10:11,300 --> 00:10:21,970
Well let's start by doing a 'const getData' and this will be (equal) an async function.

119
00:10:23,610 --> 00:10:28,470
And I want to just point out that I did it this time with the function expression instead of the way that

120
00:10:28,470 --> 00:10:31,900
we did it last time which was async function and then the function name.

121
00:10:32,040 --> 00:10:33,570
But I just want to show you both ways.

122
00:10:35,350 --> 00:10:44,030
All right so how can we do a 'promise.all'? Well if you remember we can now put the 'await' keyword

123
00:10:44,060 --> 00:10:50,400
in front of any promise. So we can put the 'await' keyword in front of promise.all

124
00:10:50,570 --> 00:11:02,760
So I can say that const- and this is a little ES6 magic of destructuring- I can say users, posts and albums

125
00:11:03,800 --> 00:11:12,700
that We're going to receive is going to equal 'await' and then the promise.all which we already have.

126
00:11:13,070 --> 00:11:14,450
So let's just copy that.

127
00:11:14,460 --> 00:11:19,170
We're going to copy the promise.all and place it on here.

128
00:11:20,080 --> 00:11:20,680
All right.

129
00:11:20,800 --> 00:11:32,750
And now we can just console log what we had. We can copy and paste right after we 'await' all the promises

130
00:11:33,270 --> 00:11:42,590
we'll have 'users', 'posts'  -if I can spell. and then 'albums'. and instead of Array because we've done it with destructuring

131
00:11:42,830 --> 00:11:46,730
we can just say 'users'

132
00:11:49,790 --> 00:11:50,480
'posts'

133
00:11:53,260 --> 00:11:55,250
and 'albums'.

134
00:11:55,510 --> 00:12:05,510
All right so let's see if this works. Copy and paste this and run getData

135
00:12:08,220 --> 00:12:09,030
and look at that.

136
00:12:09,090 --> 00:12:12,920
We got the exact same results.

137
00:12:13,890 --> 00:12:14,670
Very cool.

138
00:12:15,070 --> 00:12:23,420
But there might be one thing that you noticed here that is in the promise way we have the .catch.

139
00:12:23,490 --> 00:12:31,590
If any of these fail we want to catch these errors how can we do that with async await.

140
00:12:31,590 --> 00:12:33,740
Right now we're not catching any of these errors.

141
00:12:35,490 --> 00:12:38,840
This is the part that not a lot of people are big fans of.

142
00:12:39,060 --> 00:12:47,520
But it is something that once we get used to it's not too bad. JavaScript has something called 'try catch blocks'.

143
00:12:47,790 --> 00:12:55,770
and that is when it sees the 'try' word it's just going to automatically run whatever's inside of it.

144
00:12:55,770 --> 00:13:08,130
In our case all of this block we want it to run in a try block and then 'try' comes with a catch block

145
00:13:08,160 --> 00:13:09,200
as well.

146
00:13:09,540 --> 00:13:15,450
So a try catch block and within the catch if anything fails within here.

147
00:13:15,690 --> 00:13:19,460
Well we can catch it in here so we can just console.log

148
00:13:19,550 --> 00:13:20,190
'oops'

149
00:13:21,890 --> 00:13:29,760
So now let's say I misspelled one of the URLs and let's copy this. Let's try it out.

150
00:13:30,020 --> 00:13:31,720
We'll have the new URLs.

151
00:13:31,820 --> 00:13:37,880
Let me clear that. New URLs with the misspelled URL for one of them.

152
00:13:37,880 --> 00:13:44,270
We're going to copy and paste the getData and you'll see over here that we get a syntax error.

153
00:13:44,560 --> 00:13:53,570
And that is because one thing you have to remember with catch is that the catch receives an error and

154
00:13:53,570 --> 00:13:55,390
this error you can console log it

155
00:13:55,430 --> 00:14:00,310
if you want. So let's just console log and then try this again.

156
00:14:01,530 --> 00:14:07,230
This time we'll just call this one getData1 -perfect.

157
00:14:07,240 --> 00:14:14,770
Now if I clean this up a bit and do getData1 with the try catch block I get

158
00:14:15,100 --> 00:14:15,910
'oops'

159
00:14:15,920 --> 00:14:17,420
Type error failed to fetch.

160
00:14:17,510 --> 00:14:26,860
So I get the catch block with the error just like we did with promise.all just using promises.

161
00:14:27,400 --> 00:14:28,400
And there you have it.

162
00:14:28,420 --> 00:14:29,250
That's it.

163
00:14:29,330 --> 00:14:37,090
Async await although intimidating at first because there is a bit of new syntax actually makes things quite

164
00:14:37,090 --> 00:14:40,130
nice and synchronous looking.

165
00:14:40,210 --> 00:14:48,370
We simply have a variable that we assign the await promise to and then the function pauses there

166
00:14:48,370 --> 00:14:53,710
until the promise returns and then it continues on with console logging.

167
00:14:53,860 --> 00:14:59,690
And you just have to remember the try catch blocks here to catch your errors and that's it.

168
00:14:59,710 --> 00:15:02,280
You're now an async await Master.

169
00:15:02,350 --> 00:15:05,170
You can use whichever one you prefer.

170
00:15:05,170 --> 00:15:12,370
Like I said at the end of the day use promises or async await functions based on whichever one is simpler

171
00:15:12,370 --> 00:15:19,510
for you and your team but hopefully when you encounter both of these, you're now a lot more comfortable.

172
00:15:19,660 --> 00:15:21,570
I'll see you in the next one. Bye-bye.