1 00:00:00,700 --> 00:00:01,839 Welcome back. 2 00:00:01,870 --> 00:00:09,370 In the previous video, we're able to make a HTTP request inside our React application using the Fetch 3 00:00:09,370 --> 00:00:10,700 HTTP client. 4 00:00:10,720 --> 00:00:13,400 So let's make use of Axios. 5 00:00:13,420 --> 00:00:15,990 Also with a third party HTTP client. 6 00:00:16,000 --> 00:00:17,850 So back to our terminal here. 7 00:00:18,340 --> 00:00:26,290 Let me shut down my server, click the console and let's install Axios and there we go. 8 00:00:26,680 --> 00:00:27,970 John at. 9 00:00:29,340 --> 00:00:31,660 Is the PM going to be PM I. 10 00:00:31,680 --> 00:00:33,600 And then the name of the package. 11 00:00:33,840 --> 00:00:35,280 So why is it stolen? 12 00:00:35,310 --> 00:00:36,740 Let's get back to work. 13 00:00:36,750 --> 00:00:40,980 So here we can comment this one out. 14 00:00:40,980 --> 00:00:43,050 And it says that using. 15 00:00:44,620 --> 00:00:44,950 It. 16 00:00:46,600 --> 00:00:48,160 Using Fetch. 17 00:00:48,900 --> 00:00:51,300 And see the syntax, the differences. 18 00:00:51,450 --> 00:00:57,780 So here is using this using Axios client. 19 00:00:57,780 --> 00:01:01,660 So here the same thing we need to bring in the Axios. 20 00:01:01,680 --> 00:01:05,700 So in part, Axios is from. 21 00:01:06,730 --> 00:01:09,720 For Axios and that is it. 22 00:01:09,730 --> 00:01:16,510 So we need to use effect one more time as a function, then pass in a callback function as a first argument 23 00:01:17,170 --> 00:01:20,920 as that in a second I'm going to be my array of my dependencies. 24 00:01:21,250 --> 00:01:23,500 So I'll talk about this one very soon. 25 00:01:23,620 --> 00:01:32,080 So again, here we can now make what the HTTP call, a HTTP call here. 26 00:01:32,500 --> 00:01:37,420 So the same process instead of using fetch, I'm going to use Axios. 27 00:01:37,420 --> 00:01:47,710 So Axios the same thing and then I'm going to use dot get method going to get request they pass in the 28 00:01:47,710 --> 00:01:49,870 API URL. 29 00:01:50,200 --> 00:01:54,070 So here we also want to handle the promise here. 30 00:01:54,070 --> 00:01:56,200 But here we only have one level. 31 00:01:56,470 --> 00:01:57,640 So let me show you what I mean here. 32 00:01:57,640 --> 00:02:01,630 So dot then here and then dot catch here also. 33 00:02:01,910 --> 00:02:07,300 So in each of these we pass in a callback function called anonymous function here. 34 00:02:08,610 --> 00:02:09,690 Like that. 35 00:02:11,240 --> 00:02:12,020 Like that. 36 00:02:12,020 --> 00:02:19,090 And then here too, you pass in your callback function and then ask that if something goes wrong. 37 00:02:19,100 --> 00:02:26,030 So here we have the actual post and then here we have the error if there is one. 38 00:02:26,030 --> 00:02:32,300 So here we can console.log immediately and say console that, log the error. 39 00:02:33,270 --> 00:02:39,150 And then here too, we can return it immediately by saying console.log. 40 00:02:39,210 --> 00:02:40,140 The. 41 00:02:41,570 --> 00:02:42,260 Post. 42 00:02:42,390 --> 00:02:49,040 So we see that for Axios we don't need to convey the data from the we get to Jason. 43 00:02:49,980 --> 00:02:54,130 But before we can get it, I tried data here that is simpler to read here. 44 00:02:54,150 --> 00:02:58,710 There is no conversion after getting data here and that is about Axios. 45 00:02:58,860 --> 00:02:59,940 So let's save it. 46 00:02:59,940 --> 00:03:01,230 And now let's have a look. 47 00:03:02,010 --> 00:03:03,300 Let's refresh it. 48 00:03:03,630 --> 00:03:07,790 My server is down because I didn't start my server. 49 00:03:08,130 --> 00:03:15,370 Clear the console and then end PM run or John starts any of this method. 50 00:03:15,390 --> 00:03:20,460 You'll be good to go provided you have John being installed. 51 00:03:21,060 --> 00:03:22,290 So let's have a look. 52 00:03:23,010 --> 00:03:24,150 Let's refresh it. 53 00:03:24,810 --> 00:03:25,610 To boot in. 54 00:03:25,620 --> 00:03:27,540 Let's wait and see. 55 00:03:28,020 --> 00:03:30,390 We add script one to start. 56 00:03:30,510 --> 00:03:32,520 All right, now let's see the response. 57 00:03:32,520 --> 00:03:33,330 Now see that? 58 00:03:33,330 --> 00:03:38,010 Here we have the data being given to us automatically. 59 00:03:38,010 --> 00:03:43,470 You have data on the data on the response as data here. 60 00:03:43,470 --> 00:03:44,460 So let's check it out. 61 00:03:44,460 --> 00:03:49,170 And now let's see, we have the data as we use fetch. 62 00:03:49,170 --> 00:03:50,250 So that is it. 63 00:03:50,490 --> 00:03:58,260 So what about if you want to avoid using the then and make use of async await to make our life easier? 64 00:03:58,260 --> 00:04:00,690 How are we going to do it? 65 00:04:00,900 --> 00:04:04,980 So one more time see that we have the dependencies. 66 00:04:04,980 --> 00:04:08,670 So this use effect will depend on inserting data. 67 00:04:08,700 --> 00:04:09,840 If it's ready. 68 00:04:09,840 --> 00:04:13,080 We need to call the the use effect again. 69 00:04:13,170 --> 00:04:18,600 For example, if this is a real world application that we build and let's say that we want to fetch 70 00:04:18,600 --> 00:04:24,960 a details of a particular user, so maybe you want to get the ID of the user in the parameter. 71 00:04:25,110 --> 00:04:32,490 So by the time we make a request, we get an ID, then you make a request to the database and then get 72 00:04:32,490 --> 00:04:32,940 a user. 73 00:04:32,940 --> 00:04:36,720 By the time you get it, the use effect has already been run. 74 00:04:36,720 --> 00:04:42,330 So if we want to run again, you want to pass the ID into the dependencies as that. 75 00:04:42,330 --> 00:04:47,310 So if it's ready this effect, this is effect will also run again. 76 00:04:47,670 --> 00:04:50,040 So we are going to make use of it as you move on. 77 00:04:50,040 --> 00:04:55,410 Don't worry if it's not clear to you, the most important thing here is to be able to make a HTTP request. 78 00:04:55,650 --> 00:05:01,350 So in the next video we are going to convert this one to make use of async await. 79 00:05:01,350 --> 00:05:05,730 And then we also want to handle errors and loading and display the data into the browser. 80 00:05:05,730 --> 00:05:08,280 So let's get working in this video, guys.