1 00:00:07,570 --> 00:00:08,890 Welcome back. 2 00:00:08,920 --> 00:00:15,550 In this video, let's see how we can make a HTTP request using the fetch API. 3 00:00:15,910 --> 00:00:19,390 And this is the final project that we are going to build. 4 00:00:19,810 --> 00:00:27,040 You can see that when I click on fetch, I'm able to fetch list of posts from somewhere else into my 5 00:00:27,040 --> 00:00:28,000 application. 6 00:00:28,210 --> 00:00:35,380 So a way of getting the information from different server is what we call the HTTP request and we use 7 00:00:35,380 --> 00:00:36,870 fetch to get it done. 8 00:00:36,880 --> 00:00:41,620 So we are going to use this server called JSON Placeholder. 9 00:00:41,770 --> 00:00:49,280 If you go to JSON placeholder dot type icon, you're going to greet you with this website. 10 00:00:49,300 --> 00:00:56,710 So after I show you how to use this API at your free time, you can come to this website to make use 11 00:00:56,710 --> 00:00:59,780 of any API from this website. 12 00:00:59,800 --> 00:01:01,390 So let's see the step. 13 00:01:01,930 --> 00:01:09,190 As always, I have already provided the template for you because again, this section is not about HTML 14 00:01:09,190 --> 00:01:12,090 or CSS or how to select an element. 15 00:01:12,100 --> 00:01:16,450 So we have selected the element and a CSS is also ready. 16 00:01:16,450 --> 00:01:21,740 So if you open it, you're going to have something like this with some static text here. 17 00:01:21,760 --> 00:01:27,160 So now let's explore more how to use the fetch API. 18 00:01:27,280 --> 00:01:32,470 So before we get into that, we need what is called the API endpoint. 19 00:01:32,470 --> 00:01:35,710 So here, let's have a comment by saying making. 20 00:01:36,800 --> 00:01:37,640 Real quests. 21 00:01:37,640 --> 00:01:38,600 So let's look at it. 22 00:01:38,600 --> 00:01:39,020 Step. 23 00:01:39,260 --> 00:01:41,630 Step number one is get. 24 00:01:43,290 --> 00:01:45,810 So the end point is this one. 25 00:01:45,810 --> 00:01:52,620 If you go to the placeholder and you scroll down, they have exposed some of the resources for us and 26 00:01:52,620 --> 00:01:55,080 we have a sample code to get it done. 27 00:01:55,080 --> 00:02:01,860 But if you scroll down, these are the resources and we can make a request to this slash post to get 28 00:02:01,940 --> 00:02:06,500 hundred posts or if you want to fetch comment when a base slash comment. 29 00:02:06,510 --> 00:02:13,440 So if you click on that, you're going to see the you are for that and you are going to copy this u 30 00:02:13,440 --> 00:02:22,470 r and remember all API retains what is called JSON format and if you get back to back end, we are going 31 00:02:22,470 --> 00:02:28,830 to develop our own API to have something like this and a back end. 32 00:02:28,830 --> 00:02:37,110 We will build what is called employee database or block API and expand this API for the meantime, let's 33 00:02:37,110 --> 00:02:39,030 see how we are going to consume this one. 34 00:02:39,030 --> 00:02:41,370 So now let's copy this one. 35 00:02:43,050 --> 00:02:45,430 And now back to our application. 36 00:02:45,450 --> 00:02:48,880 Let's declare a variable and call this one as you are. 37 00:02:49,020 --> 00:02:50,430 Is equal to that. 38 00:02:50,460 --> 00:02:54,450 Now the first step is that we go back to u r l. 39 00:02:54,690 --> 00:02:59,460 Now, if you scroll down here, we have the root. 40 00:02:59,460 --> 00:03:04,590 The root simply means that the u are all and we have all the HTTP method. 41 00:03:04,650 --> 00:03:09,710 Like I said, if you get back to back in development, all this would be pretty easy for you to understand. 42 00:03:09,720 --> 00:03:15,690 For the meantime, when using the fetch API, you need to parse in the HTTP method. 43 00:03:15,720 --> 00:03:21,180 When I say HTTP method, it simply means that what action do you want to take on the server? 44 00:03:21,240 --> 00:03:25,540 And for this, the placeholder is the server that we want to talk to. 45 00:03:25,740 --> 00:03:32,910 So for this server we can create a new post into H or we can get if I trying to get something from a 46 00:03:32,910 --> 00:03:40,590 server, we are going to use get requests if we want to create a new to do or new post into the server. 47 00:03:40,620 --> 00:03:43,170 We are going to use what is called post requests. 48 00:03:43,170 --> 00:03:48,330 For the meantime, we are going to state to get requests if we get back to back and we are going to 49 00:03:48,330 --> 00:03:51,190 make use of all these HTTP methods. 50 00:03:51,210 --> 00:03:55,980 So now we know we are going to use this to now we have all the ingredients. 51 00:03:55,980 --> 00:03:57,420 So let's get started. 52 00:03:57,780 --> 00:04:03,510 So to get started, we are going to make use of fetch because it's a built in API. 53 00:04:03,540 --> 00:04:09,270 We have access to it globally and for this we call it as a function. 54 00:04:09,600 --> 00:04:18,300 And remember making it HTTP request simply means that we are going to deal with promises meaning asynchronous 55 00:04:18,300 --> 00:04:22,800 way, meaning that we don't know when the response will be back. 56 00:04:22,830 --> 00:04:29,820 It can happen that the server of guessing placeholder can be down or we have low uptime. 57 00:04:29,820 --> 00:04:32,180 So in that way we need to handle that. 58 00:04:32,190 --> 00:04:39,060 So to be familiar with making HTTP requests, you need to understand what is called asynchronous programming. 59 00:04:39,090 --> 00:04:43,980 And for this one too, we have covered them in detail in the previous section. 60 00:04:43,980 --> 00:04:44,960 So let's see. 61 00:04:44,970 --> 00:04:49,050 So the first item we pass to this one is going to be the you are error. 62 00:04:49,290 --> 00:04:51,150 Now, here we go. 63 00:04:51,180 --> 00:04:54,450 We need to handle the promise well. 64 00:04:54,450 --> 00:05:01,170 So these are going to be we can use the normal promise we or callback or async await. 65 00:05:01,320 --> 00:05:05,300 So here we add what is called dot, then meaning that dot. 66 00:05:05,310 --> 00:05:13,140 Then what is the actual data that is coming back for the server and you call it as a function? 67 00:05:13,140 --> 00:05:15,840 And lastly, we bring in cache. 68 00:05:15,840 --> 00:05:22,680 So inside this card is where we are going to cut any error that might occur when making this request. 69 00:05:22,680 --> 00:05:27,650 And this one takes in one element and that is a callback as that. 70 00:05:27,660 --> 00:05:30,260 And here I'll pass in error function. 71 00:05:30,270 --> 00:05:37,250 Likewise, this one also has a function and for this one we have access to the error. 72 00:05:37,260 --> 00:05:41,580 So let's go ahead and then consider plug the error here. 73 00:05:41,610 --> 00:05:42,240 Perfect. 74 00:05:42,450 --> 00:05:50,280 So inside the dot, then we have access to the data and here I'll call it as response. 75 00:05:50,280 --> 00:05:54,740 And here I have access to it as a response. 76 00:05:54,870 --> 00:05:57,060 Now let's consider that. 77 00:05:57,240 --> 00:06:04,290 So now if I save it and I check the console of this one, now let's see. 78 00:06:04,560 --> 00:06:11,940 And you can see that I got something called response on line number 11 on my code, which is this. 79 00:06:11,940 --> 00:06:17,210 That is why I say that we get back the response inside the door then. 80 00:06:17,220 --> 00:06:20,430 So now let's crack open it and let's see. 81 00:06:20,430 --> 00:06:22,590 And we see something strange. 82 00:06:22,590 --> 00:06:26,430 Here we have the body, the actual data. 83 00:06:26,430 --> 00:06:33,930 It is on the body, but we have this ellipsis dot dot simply means that it is readable stream, meaning 84 00:06:33,930 --> 00:06:37,470 that the actual data is not ready yet. 85 00:06:37,470 --> 00:06:44,760 So to be able to convert the actual data, we need to add what is called JSON. 86 00:06:44,760 --> 00:06:51,690 So here we have a method on the response that is the to Jason. 87 00:06:52,110 --> 00:06:54,840 And remember this one too is a performance. 88 00:06:54,840 --> 00:06:57,700 So we need to handle the promise also. 89 00:06:57,720 --> 00:07:04,740 So inside here we have access to the actual post here or the actual data. 90 00:07:04,890 --> 00:07:12,990 So our pass into the callback function and now if I console that, log the data, let's have a look. 91 00:07:12,990 --> 00:07:15,900 Now save it and now let's check. 92 00:07:16,230 --> 00:07:21,600 And you can see that I go back all the inside my current. 93 00:07:21,600 --> 00:07:28,110 So here so now I can take this post and display it to the DOM as I did here. 94 00:07:28,140 --> 00:07:32,370 You see, I have 100 posts, the one we see in the console. 95 00:07:32,370 --> 00:07:35,520 Here is what we see on the page. 96 00:07:35,550 --> 00:07:37,920 How awesome it is. 97 00:07:38,010 --> 00:07:42,530 So what has left is that we are going to create a function. 98 00:07:42,660 --> 00:07:46,830 Jane, to take this pose and then render into the dog. 99 00:07:47,220 --> 00:07:50,200 So for this I am going to use async await. 100 00:07:50,220 --> 00:07:54,450 So now we are going to create a function to render this one. 101 00:07:54,450 --> 00:07:55,890 So here we go. 102 00:07:55,980 --> 00:07:59,280 I'm going to be const fetch. 103 00:08:01,010 --> 00:08:09,410 Post is equal to a function and as that and because I'm going to use async await our mark my function 104 00:08:09,410 --> 00:08:13,030 as an async and our brand might try and catch. 105 00:08:13,040 --> 00:08:17,870 So inside my try, that's where I'm going to make the request to this endpoint. 106 00:08:17,870 --> 00:08:19,430 So here we go. 107 00:08:19,850 --> 00:08:28,130 Const response is equal to our weights and the fetch API. 108 00:08:28,370 --> 00:08:31,970 Then I'll pass in the you are perfect. 109 00:08:31,970 --> 00:08:38,690 So inside the response, I need to await that and get back the extra response by using what is called 110 00:08:39,020 --> 00:08:39,679 JSON. 111 00:08:39,890 --> 00:08:45,080 So comes the actual data here is equal to await. 112 00:08:45,080 --> 00:08:48,410 And then the response dot Jason. 113 00:08:48,800 --> 00:08:57,620 Well, if we are using a third party HTTP client like Axios for this second step, we don't do it because 114 00:08:57,620 --> 00:09:05,060 Axios passes the data for us automatically without doing this one by converting the response to JSON 115 00:09:05,060 --> 00:09:07,280 before we get back the actual data. 116 00:09:07,850 --> 00:09:14,250 So now I can go ahead and then loop through this one and then inject it into the DOM. 117 00:09:14,270 --> 00:09:16,220 So now let's have a look. 118 00:09:16,340 --> 00:09:22,760 So here, if you consume that log the data, you're going to have the same thing as we saw. 119 00:09:22,790 --> 00:09:28,070 So inside here we can console.log the error in case we have one. 120 00:09:29,030 --> 00:09:32,500 So now let's call the function as fetch post. 121 00:09:32,510 --> 00:09:35,740 So now let's see and indeed we have of the post. 122 00:09:35,750 --> 00:09:40,940 But what I want is that I want to add an event listener on the button. 123 00:09:40,940 --> 00:09:45,750 When I click on this one, then I want to call this function to fetch. 124 00:09:45,770 --> 00:09:48,770 So now let's select the event listener. 125 00:09:48,770 --> 00:09:49,670 That is a button. 126 00:09:49,670 --> 00:09:51,790 So I forgot to select that. 127 00:09:51,800 --> 00:09:56,720 And that is the let's see the button, which is this one. 128 00:09:56,720 --> 00:09:59,090 So let's go ahead and then select that. 129 00:09:59,090 --> 00:10:09,530 So inside the JavaScript here, we can copy this one and let's paste down here and change this one to 130 00:10:10,340 --> 00:10:16,610 be C and because it's an ID, I'll use hash tag and that is it. 131 00:10:16,610 --> 00:10:24,230 So down here b t n dot event listener and the event is going to be a click event. 132 00:10:24,260 --> 00:10:26,630 Then I'll call the fetch post. 133 00:10:27,020 --> 00:10:34,580 Now let's move this one and let's check the console when I click on this one and you can see that I 134 00:10:34,580 --> 00:10:37,130 go back the response Great. 135 00:10:37,520 --> 00:10:40,790 So the last step is that there is an error here. 136 00:10:40,790 --> 00:10:48,380 Sorry, the last step is that I'm going to look through the post and then inject into the DOM as we 137 00:10:48,380 --> 00:10:49,970 did for the task manager. 138 00:10:49,970 --> 00:10:52,790 Application is going to be the same step here. 139 00:10:53,030 --> 00:11:00,170 Remember, we have selected the container, meaning that we are going to inject and this is a container, 140 00:11:00,170 --> 00:11:00,530 right? 141 00:11:00,530 --> 00:11:06,590 If I collapse it, you can see I have a card that grab the two items. 142 00:11:06,590 --> 00:11:08,800 I have one here and one here. 143 00:11:08,840 --> 00:11:11,930 So let me collapse all the card and move one here. 144 00:11:12,260 --> 00:11:15,500 So I will select this one and then copy it. 145 00:11:15,500 --> 00:11:21,170 Or we can move it or we can maintain it and then comment it for future references. 146 00:11:21,350 --> 00:11:28,430 So now if I save this one, you can see that we have empty post here, but instead we are going to use 147 00:11:28,430 --> 00:11:30,410 JavaScript to add the one. 148 00:11:30,410 --> 00:11:31,730 So here we go. 149 00:11:31,730 --> 00:11:36,740 So here we are going to display all the posts and display to the DOM. 150 00:11:36,740 --> 00:11:38,390 So here we go. 151 00:11:38,390 --> 00:11:44,030 So let's add comment and say that display to Dom but English, right? 152 00:11:44,300 --> 00:11:53,210 So okay, so let's look through the data using map and as we did and here we have access to the individual 153 00:11:53,210 --> 00:11:59,810 post here as that and we bring in return and then back take here. 154 00:11:59,810 --> 00:12:03,020 Then I can add my HTML like that. 155 00:12:03,020 --> 00:12:06,620 So what comes back is the actual HTML. 156 00:12:06,620 --> 00:12:10,370 So I'll call this one as result equal to that. 157 00:12:10,370 --> 00:12:14,090 So next is I need to add the dynamic value here. 158 00:12:14,330 --> 00:12:16,760 So the first one, I'm going to be the dollar sign. 159 00:12:16,760 --> 00:12:26,090 Charybdis is going to be post dot title and then for the body which is the p here remove that dollar 160 00:12:26,090 --> 00:12:26,510 sign. 161 00:12:26,510 --> 00:12:30,350 Charybdis is going to be post dot body. 162 00:12:30,530 --> 00:12:35,030 That's what we saw in the console is post and that is it. 163 00:12:35,120 --> 00:12:39,380 Lastly is that I need to add to the DOM as we did. 164 00:12:39,380 --> 00:12:46,370 So I will take the container and then the inner html is equal to result. 165 00:12:46,370 --> 00:12:49,730 Then I will join with the empty string. 166 00:12:51,730 --> 00:12:52,750 And that is it. 167 00:12:52,750 --> 00:12:55,560 So let's see if I click on this one. 168 00:12:55,570 --> 00:12:56,560 Let's wait. 169 00:12:56,560 --> 00:13:05,290 And we have back the posts from the external server and this is how we make HTTP request guys. 170 00:13:05,500 --> 00:13:11,320 So you can improve this application to display some loading in case it is loading. 171 00:13:11,470 --> 00:13:11,980 All right. 172 00:13:11,980 --> 00:13:15,460 So that's pretty much of how to make an HTTP request. 173 00:13:15,490 --> 00:13:21,850 The final project is about getting my location using the geo location API.