1
00:00:01,481 --> 00:00:03,440
Now that you have a brief overview of

2
00:00:03,440 --> 00:00:05,809
async/await, the only thing left to do is

3
00:00:05,809 --> 00:00:09,767
dive into some examples. Start by opening

4
00:00:09,767 --> 00:00:12,841
the iterating.mjs file. We're going to

5
00:00:12,841 --> 00:00:16,172
write code in the get function. Much like

6
00:00:16,172 --> 00:00:19,527
we did with consuming promises, we want to

7
00:00:19,527 --> 00:00:23,572
do a simple HTTP request. The code here

8
00:00:23,572 --> 00:00:26,992
has the await keyword before the axios.get

9
00:00:26,992 --> 00:00:29,344
function. This highlights that you can use

10
00:00:29,344 --> 00:00:32,594
await on functions that return promises.

11
00:00:32,594 --> 00:00:34,157
That is, you don't need a separate

12
00:00:34,157 --> 00:00:37,497
async/await version of Axios. In fact,

13
00:00:37,497 --> 00:00:39,468
that doesn't even exist. Additionally,

14
00:00:39,468 --> 00:00:42,168
since this is now making the promise a

15
00:00:42,168 --> 00:00:44,893
synchronous call, you can assign the data

16
00:00:44,893 --> 00:00:47,938
parameter to the value of the get call, or

17
00:00:47,938 --> 00:00:50,145
more accurately, you can destructure the

18
00:00:50,145 --> 00:00:53,506
result of the get call into a data

19
00:00:53,506 --> 00:00:55,343
parameter. Before you load up the web

20
00:00:55,343 --> 00:00:57,222
browser, make sure you're running npm run

21
00:00:57,222 --> 00:01:02,503
dev so that this code will be executed. Go

22
00:01:02,503 --> 00:01:04,218
into the browser, and choose the iterating

23
00:01:04,218 --> 00:01:06,354
link to load the functions for this

24
00:01:06,354 --> 00:01:08,899
module. When you load this page, you

25
00:01:08,899 --> 00:01:11,579
actually get an error in your console. It

26
00:01:11,579 --> 00:01:13,839
tells you there is an unexpected reserved

27
00:01:13,839 --> 00:01:16,980
word. If you click on the file name over

28
00:01:16,980 --> 00:01:19,259
on the right, it takes you to the code

29
00:01:19,259 --> 00:01:23,119
that you just wrote. Can you see where the

30
00:01:23,119 --> 00:01:25,021
error is? Well let's go back to the code

31
00:01:25,021 --> 00:01:27,108
and look at that get function. Does

32
00:01:27,108 --> 00:01:30,175
looking at the code in your IDE help at

33
00:01:30,175 --> 00:01:33,294
all? Well remember the last clip? I said

34
00:01:33,294 --> 00:01:35,476
that there was two important notes on the

35
00:01:35,476 --> 00:01:37,850
await keyword. The one that applies here

36
00:01:37,850 --> 00:01:41,241
is that it must be used inside of an async

37
00:01:41,241 --> 00:01:44,912
function. So add the async keyword to the

38
00:01:44,912 --> 00:01:47,526
function definition. Save that, and return

39
00:01:47,526 --> 00:01:50,259
to the browser. This time when you reload

40
00:01:50,259 --> 00:01:52,472
the page, you don't see any console

41
00:01:52,472 --> 00:01:55,912
errors, or at least you shouldn't. So now

42
00:01:55,912 --> 00:01:59,402
you can click the get button. You once

43
00:01:59,402 --> 00:02:02,028
again see the familiar output in the

44
00:02:02,028 --> 00:02:05,022
results pane. Let's take a quick look at

45
00:02:05,022 --> 00:02:07,447
the code side by side. On the left, we

46
00:02:07,447 --> 00:02:09,453
have our promise-based approach from

47
00:02:09,453 --> 00:02:12,513
earlier in the course, and on the right,

48
00:02:12,513 --> 00:02:14,655
we have our async/await- based approach.

49
00:02:14,655 --> 00:02:16,879
They're both accomplishing the same thing,

50
00:02:16,879 --> 00:02:18,996
and they're doing so in similar ways.

51
00:02:18,996 --> 00:02:21,803
However, with the await, it might be

52
00:02:21,803 --> 00:02:23,885
slightly more clear the order that the

53
00:02:23,885 --> 00:02:25,981
code is getting executed in, but also note

54
00:02:25,981 --> 00:02:27,687
that they're really not that much

55
00:02:27,687 --> 00:02:29,996
different. Much like with promises, what

56
00:02:29,996 --> 00:02:32,807
happens here when a call like this fails?

57
00:02:32,807 --> 00:02:38,000
The next clip will show you a familiar way to handle errors with async/await.

