1
00:00:00,480 --> 00:00:08,610
In this video let's go ahead and make use of async await than using dot then then because we need to

2
00:00:08,610 --> 00:00:14,250
write more in code and async await is also a new feature in JavaScript.

3
00:00:14,250 --> 00:00:15,990
So let's make use of that.

4
00:00:16,470 --> 00:00:21,540
But they are a couple of steps we need to follow when making async await.

5
00:00:21,540 --> 00:00:24,270
So let's see how the async await.

6
00:00:24,270 --> 00:00:29,280
Key word can be used to perform asynchronous operations synchronously.

7
00:00:29,520 --> 00:00:36,900
So this operation or this is especially useful when working with react hooks as it can be used to perform

8
00:00:36,900 --> 00:00:43,140
side effects in the declarative way when using async await which without hooks.

9
00:00:43,140 --> 00:00:45,600
There are a few things to keep in mind.

10
00:00:45,990 --> 00:00:54,180
First is async functions must be wrapped in a dry catch block to catch any errors that may occur.

11
00:00:54,330 --> 00:01:01,320
And secondly is a weight can only be used inside of an async function.

12
00:01:01,320 --> 00:01:07,050
And finally we at who can only be used inside a react component.

13
00:01:07,050 --> 00:01:13,410
So with that being said, let's take a look at how async await can be used with react.

14
00:01:13,800 --> 00:01:14,360
Okay.

15
00:01:14,820 --> 00:01:17,100
So you might be thinking that.

16
00:01:17,100 --> 00:01:20,340
Well, because okay, let me comment out this one.

17
00:01:22,480 --> 00:01:29,320
Let me comment on this one and not come down here and make use of async await.

18
00:01:29,530 --> 00:01:38,020
So use effects as my callback function and that and my dependencies of array a real dependencies.

19
00:01:38,470 --> 00:01:45,850
So you may be thinking the actual inside I may bring in here we have the axios and then dot gets.

20
00:01:45,880 --> 00:01:49,300
Then you pass in the api url.

21
00:01:49,330 --> 00:01:57,610
I start so may be thinking that well because the callback function is a function, we can mark that

22
00:01:57,610 --> 00:02:04,240
one as an async but use effect says no, I don't allow that.

23
00:02:04,510 --> 00:02:10,720
So to be able to use async await, we need to create a function and then reference it inside the use

24
00:02:10,720 --> 00:02:11,280
effect.

25
00:02:11,290 --> 00:02:17,490
Or we can create it inside the use effect and market as what market as an async.

26
00:02:17,500 --> 00:02:18,910
So let's see what I mean here.

27
00:02:18,940 --> 00:02:20,860
So now come down here.

28
00:02:21,010 --> 00:02:24,610
So let's make a function const and say fetch.

29
00:02:27,460 --> 00:02:28,120
Data.

30
00:02:28,270 --> 00:02:33,610
And then this function, you're not taking anything just to make it HTTP requests.

31
00:02:34,360 --> 00:02:35,650
So here.

32
00:02:35,680 --> 00:02:36,790
Here comes.

33
00:02:37,900 --> 00:02:40,090
Let's say let's console.log.

34
00:02:40,120 --> 00:02:40,540
Okay.

35
00:02:40,540 --> 00:02:42,370
So here comes to inside here.

36
00:02:42,400 --> 00:02:44,770
Now we can make the HTTP request here.

37
00:02:45,220 --> 00:02:53,230
So now I can mark my function as an async so that I can mark the request my API has and await.

38
00:02:53,260 --> 00:02:56,560
So here I will mark it as await.

39
00:02:56,590 --> 00:02:57,930
So what comes back?

40
00:02:57,940 --> 00:03:03,100
I can save it or store it into a variable call response.

41
00:03:03,790 --> 00:03:05,410
And it's equal to that.

42
00:03:05,860 --> 00:03:13,270
So I need to call the function inside my use effects as used as fetch data.

43
00:03:13,480 --> 00:03:23,350
So in this one, if I console.log the response, remember we have the data on the response.

44
00:03:23,470 --> 00:03:24,700
Let's have a look.

45
00:03:24,970 --> 00:03:27,580
Now is equal the same as before.

46
00:03:27,580 --> 00:03:30,400
But this one looks cleaner and easy.

47
00:03:30,550 --> 00:03:32,180
But we are lacking one thing.

48
00:03:32,200 --> 00:03:39,670
What about if you want to handle the error that says that we need to wrap our code into try and catch

49
00:03:39,710 --> 00:03:40,300
method?

50
00:03:40,480 --> 00:03:47,030
So inside here I can cut this one, cut it, and then bring in, try and catch.

51
00:03:47,050 --> 00:03:50,500
And inside my try, I can try and make the request.

52
00:03:50,500 --> 00:03:52,800
And here it has some error.

53
00:03:52,810 --> 00:03:58,400
I will console.log the error here, and that is it.

54
00:03:58,420 --> 00:03:59,620
So let's have a look.

55
00:03:59,950 --> 00:04:00,850
Refresh it.

56
00:04:00,850 --> 00:04:03,590
And now moment of truth.

57
00:04:03,610 --> 00:04:05,590
Now I have it back.

58
00:04:05,620 --> 00:04:06,480
Perfect.

59
00:04:06,490 --> 00:04:09,280
So let's try to make changes to the end point.

60
00:04:09,310 --> 00:04:10,500
So I get some error.

61
00:04:10,510 --> 00:04:12,730
So let's change this one to something else.

62
00:04:13,510 --> 00:04:14,580
So let's have a look.

63
00:04:14,590 --> 00:04:17,260
Let's fetch now and see that I get an error.

64
00:04:17,290 --> 00:04:22,960
And those error message requests fail, which is code for for that is it.

65
00:04:22,990 --> 00:04:25,930
So that's a cool part of the async await.

66
00:04:26,080 --> 00:04:32,080
So now that we know how to make a HTTP request using the modern way.

67
00:04:32,260 --> 00:04:38,270
What about if you want to display the data into the page, how are we going to do it?

68
00:04:38,290 --> 00:04:40,240
So let's do that one in this video.