1 00:00:00,180 --> 00:00:06,180 In this video as promised earlier in the section you're going to learn how to make HDTV requests to 2 00:00:06,180 --> 00:00:10,590 a given U.R.L. without using the request NPM library. 3 00:00:10,680 --> 00:00:17,430 Request is just an NPM library and NPM libraries can't do anything that you could do with node anyways. 4 00:00:17,430 --> 00:00:20,180 Typically they just make it easier to do. 5 00:00:20,250 --> 00:00:23,360 And we saw that with yards and request. 6 00:00:23,370 --> 00:00:29,700 You don't need those to work with command line arguments or to make HDTV requests but it sure does make 7 00:00:29,700 --> 00:00:32,330 the process a whole lot easier. 8 00:00:32,370 --> 00:00:38,760 Now in this video we're going to explore how we can make requests using the modules that node provides. 9 00:00:38,760 --> 00:00:44,400 This is a completely optional video as we're not going to integrate what we learn here into the weather 10 00:00:44,400 --> 00:00:45,210 application. 11 00:00:45,210 --> 00:00:50,940 Instead we're going to just explore it over in the playground directory so we can get a better feel 12 00:00:50,940 --> 00:00:54,660 for what exactly the request module is doing to do this. 13 00:00:54,660 --> 00:00:56,310 Let's make a brand new file. 14 00:00:56,340 --> 00:01:06,390 I'll call this six hyphen raw hyphen HDTV dot J as and in here we're going to essentially recreate one 15 00:01:06,390 --> 00:01:12,870 of our TTP requests firing off the request to the server getting and passing the response and doing 16 00:01:12,870 --> 00:01:15,630 something meaningful with it to get this done. 17 00:01:15,630 --> 00:01:21,240 There are two core modules that we're going to explore we can find those by cracking open the node j 18 00:01:21,250 --> 00:01:27,770 asked documentation in the browser I'm going to close the map box and dark sky API tabs since we're 19 00:01:27,780 --> 00:01:34,740 done with those and I'm going to open up node j s dot org to explore the docs. 20 00:01:34,740 --> 00:01:40,610 Once we're here we're gonna go to the documentation page and we're gonna go to the docs for our version. 21 00:01:40,620 --> 00:01:44,510 Now here we have the table of contents which we've used before. 22 00:01:44,520 --> 00:01:50,600 For example we explored the file system module earlier in the class in this video. 23 00:01:50,700 --> 00:01:55,450 We're gonna take a peek at HDTV and H TTP s. 24 00:01:55,470 --> 00:01:58,250 Now already we can see a bit of an annoyance. 25 00:01:58,260 --> 00:02:04,800 There are separate modules depending on the protocol we're using with request the NPM library. 26 00:02:04,800 --> 00:02:10,890 That's not necessary in abstracts all of that behind the scenes allowing us to easily switch out the 27 00:02:10,890 --> 00:02:16,150 protocol we're using without needing to load in a completely separate library. 28 00:02:16,170 --> 00:02:21,630 Now if we crack both open which I will in a new tab we can take a quick moment to explore them before 29 00:02:21,630 --> 00:02:23,400 using them in our code. 30 00:02:23,400 --> 00:02:27,890 Now both of these modules can be used for both pieces to the puzzle. 31 00:02:28,020 --> 00:02:34,080 You can use these libraries to create a new server and we'll talk about server creation a bit later 32 00:02:34,080 --> 00:02:40,260 in the class and you can also use these modules to make requests to an existing server and that's what 33 00:02:40,260 --> 00:02:42,190 we're going to focus on in this video. 34 00:02:42,300 --> 00:02:48,030 As we scroll down through the table of contents for each near the bottom we're gonna see a couple of 35 00:02:48,030 --> 00:02:52,070 methods and the method we're looking for is request now. 36 00:02:52,090 --> 00:02:57,630 Right here we can use request with options or a U.R.L. with optional options. 37 00:02:57,630 --> 00:03:05,130 Either way it gets the job done and we're gonna see the exact same thing for the H TTP s module if I 38 00:03:05,130 --> 00:03:07,130 scroll down we have those two ways. 39 00:03:07,130 --> 00:03:15,270 That request can be called so we use the TTP module for standard requests and we use H TTP as if we're 40 00:03:15,270 --> 00:03:18,560 making a request to a secure server. 41 00:03:18,570 --> 00:03:23,630 Now in this case both of our API eyes do use the H TTP s protocol. 42 00:03:23,730 --> 00:03:26,680 So that's what we're gonna go ahead and use as well. 43 00:03:26,730 --> 00:03:31,040 Now since it is a core module as a reminder there is no need to install it. 44 00:03:31,050 --> 00:03:39,390 We can simply load it in const H TTP S equals we're going to require the H TTP s core module. 45 00:03:39,630 --> 00:03:44,280 And once again the name I'm choosing to provide here comes from the documentation. 46 00:03:44,430 --> 00:03:49,080 If we scroll down to where we get to some examples you're gonna see that when they load it in. 47 00:03:49,080 --> 00:03:53,940 They use the H TTP s variable name as a standard. 48 00:03:53,940 --> 00:04:00,240 Now it's time to actually use the request function to fire off a request. 49 00:04:00,240 --> 00:04:03,990 In this case let's go ahead and get the forecast for a location. 50 00:04:03,990 --> 00:04:09,690 Though you could also use the same technique to geo code or interact with any other API. 51 00:04:09,690 --> 00:04:13,260 The first thing we need is a U R L to make the request too. 52 00:04:13,320 --> 00:04:15,360 So I'm gonna grab the forecast you are. 53 00:04:15,370 --> 00:04:22,350 All we had in forecast dot J S I'm gonna take the u are all variable in its entirety with the contents 54 00:04:22,350 --> 00:04:23,340 as well. 55 00:04:23,430 --> 00:04:28,590 I'm gonna copy the entire line and bring it over to our new file and paste it in. 56 00:04:28,590 --> 00:04:33,650 Now we are referencing variables which no longer exist so we can remove all of those. 57 00:04:33,690 --> 00:04:40,330 I'm gonna remove the latitude the comma and the longitude and others replace that with some static inline 58 00:04:40,540 --> 00:04:41,250 values. 59 00:04:41,250 --> 00:04:47,640 For example I can used forty comma minus seventy five which is pretty close to where I am. 60 00:04:47,640 --> 00:04:50,160 Not exact but it's good enough for this example. 61 00:04:51,270 --> 00:04:56,430 This is Andrew with a quick reminder that you should be using the new weather stack U.R.L. that you 62 00:04:56,430 --> 00:04:58,020 already had in place. 63 00:04:58,110 --> 00:05:03,540 So up top I have the old dark sky U.R.L. which I just added to the file down below. 64 00:05:03,750 --> 00:05:07,720 We have the new weather stack U.R.L. which is the one you'll end up using. 65 00:05:07,800 --> 00:05:13,540 Now right here I did remove the references to the latitude and longitude variables. 66 00:05:13,650 --> 00:05:18,300 I have set query equal to forty five comma minus seventy five. 67 00:05:18,690 --> 00:05:21,100 So this is the U.R.L. you'll end up using. 68 00:05:21,150 --> 00:05:26,790 And remember that later on when we explore the response you'll end up seeing the response from weather 69 00:05:26,790 --> 00:05:32,550 stack which we've already looked at where we have the current property with our weather data. 70 00:05:32,550 --> 00:05:37,280 All right let's jump back in to the less it down below. 71 00:05:37,300 --> 00:05:45,130 It's now time to fire off the request and we start that process with H TTP s dot request. 72 00:05:45,130 --> 00:05:50,920 This is a function so we're gonna call it as such and we pass to it to arguments. 73 00:05:50,920 --> 00:05:54,420 The first is are you are L which we have access to the. 74 00:05:54,460 --> 00:05:56,150 That you are all variable. 75 00:05:56,320 --> 00:06:01,480 And the second is a callback function and this callback function gets called. 76 00:06:01,480 --> 00:06:03,640 With the response. 77 00:06:03,870 --> 00:06:06,090 This is one last quick update for the lesson. 78 00:06:06,120 --> 00:06:12,940 Remember with whether stack we're using an H TTP U.R.L. since H TTP yes is a paid feature. 79 00:06:13,050 --> 00:06:20,910 So instead of using the TTP s core module like we're doing up above we'll be using the TTP core module 80 00:06:21,060 --> 00:06:22,560 like we're doing down below. 81 00:06:22,890 --> 00:06:29,400 So down below you can see that for the new weather stack code I've called the constant on line 1 h TTP 82 00:06:29,610 --> 00:06:38,070 and I am requiring the TTP module down there online for you'll also see that I'm calling H TTP dot request 83 00:06:38,280 --> 00:06:41,580 instead of h TTP s dot request. 84 00:06:41,580 --> 00:06:44,070 So these are the only changes we need to make. 85 00:06:44,130 --> 00:06:51,810 Just change those three instances from H TTP s over to H TTP and you'll be good to go no other changes 86 00:06:51,810 --> 00:06:54,450 required throughout the rest of the lesson. 87 00:06:54,450 --> 00:06:55,940 All right let's jump back in. 88 00:06:57,050 --> 00:07:01,490 Now the callback we use here is going to be very different from the callback we're used to. 89 00:07:01,490 --> 00:07:08,650 Like we had in the forecast or geo code file our core node modules typically operate at a lower level. 90 00:07:08,690 --> 00:07:13,270 Well NPM modules like request abstract away a lot of that complexity. 91 00:07:13,430 --> 00:07:18,710 Since we are using the core node module here we're gonna have to setup things that you might not think 92 00:07:18,770 --> 00:07:19,790 should be necessary. 93 00:07:19,790 --> 00:07:25,340 For example in this callback we don't have access to the complete response body. 94 00:07:25,340 --> 00:07:32,090 Instead we can go ahead and grab the individual chunks that come through because HDTV data could be 95 00:07:32,090 --> 00:07:34,520 streamed in multiple parts. 96 00:07:34,520 --> 00:07:36,890 So right here what does that mean for us. 97 00:07:36,920 --> 00:07:42,170 It means we have to listen for these individual chunks to come in and we also have to listen for when 98 00:07:42,230 --> 00:07:46,290 all chunks have arrived and the request is done right here. 99 00:07:46,340 --> 00:07:53,000 We can start this process by using response dot on response dot on is a function and it allows us to 100 00:07:53,030 --> 00:07:54,800 register a handler. 101 00:07:54,800 --> 00:08:01,040 Now there are a few different events we can register callback functions for one of them is data and 102 00:08:01,040 --> 00:08:06,320 we provide the event name as the first argument represented as a string. 103 00:08:06,320 --> 00:08:12,050 Now from here we can also provide the callback and that's going to fire when new data comes in and we 104 00:08:12,050 --> 00:08:13,710 get access to that data. 105 00:08:13,800 --> 00:08:21,050 The first and only argument commonly called Chuck so this is a chunk of the response it might be the 106 00:08:21,050 --> 00:08:26,740 entire thing or it might not depending on exactly how the server has been set up. 107 00:08:26,780 --> 00:08:31,850 Now the other thing we're going to need to do in here is figure out when we're done and we can do that 108 00:08:31,910 --> 00:08:34,650 using another call to response dot on. 109 00:08:34,730 --> 00:08:38,720 Here we are waiting for the end event when things are over. 110 00:08:38,750 --> 00:08:42,640 This callback function is going to run and it doesn't get any arguments. 111 00:08:42,650 --> 00:08:46,160 Instead by running we just know we're done. 112 00:08:46,160 --> 00:08:51,800 So now it's time to put these two together to figure out how we can get the entire response body pass 113 00:08:51,800 --> 00:08:55,990 it from Jason to a javascript object and actually use it. 114 00:08:56,000 --> 00:09:00,080 So as I mentioned this callback is going to fire when data comes in. 115 00:09:00,080 --> 00:09:03,520 Now this could happen one time or it could happen multiple times. 116 00:09:03,530 --> 00:09:06,080 Either way we need to take this chunk. 117 00:09:06,200 --> 00:09:11,900 We need to add it somewhere where we can store it until we have all of them then we can pass it as Jason 118 00:09:12,120 --> 00:09:12,950 to up above. 119 00:09:12,980 --> 00:09:15,350 Let's get that done by creating a new variable. 120 00:09:15,440 --> 00:09:18,720 Let data equal an empty string. 121 00:09:19,020 --> 00:09:25,500 So here I'm using left instead of const since I am going to reassign the value over time changing the 122 00:09:25,500 --> 00:09:26,320 string. 123 00:09:26,460 --> 00:09:30,780 Now inside of this callback we're gonna have access to that new chunk. 124 00:09:30,780 --> 00:09:32,850 Let's go ahead and see what the chunk looks like. 125 00:09:32,850 --> 00:09:34,400 By console logging it. 126 00:09:34,440 --> 00:09:36,600 So console dot log chunk. 127 00:09:36,690 --> 00:09:42,680 Now you'll notice that the program in its current state is actually never gonna run that code. 128 00:09:42,690 --> 00:09:44,140 Let's go ahead and prove it. 129 00:09:44,240 --> 00:09:51,030 See dot dot forward slash playground to get into that folder I'll use clear to clear the terminal output 130 00:09:51,120 --> 00:09:52,250 and I'll run our script. 131 00:09:52,320 --> 00:09:56,840 That's these six raw HDTV J.S. file. 132 00:09:56,850 --> 00:10:01,920 Now when I run this things are just gonna Hey it's not going to print our message and it's not going 133 00:10:01,920 --> 00:10:04,920 to bring us back to the terminal for us to run another command. 134 00:10:04,920 --> 00:10:09,880 Instead it's stuck it's stuck because we don't have a complete request. 135 00:10:09,880 --> 00:10:15,690 There's another method we need to use to say we're actually ready to send this off to do that we have 136 00:10:15,690 --> 00:10:22,200 to make a change to our program what we get back from the request method is what you could refer to 137 00:10:22,260 --> 00:10:30,210 as the request itself so constant request can store this variable the variable that comes back as the 138 00:10:30,210 --> 00:10:36,480 return value from request now on here there's a method we can use to kick things off that is request 139 00:10:36,750 --> 00:10:37,190 dot. 140 00:10:37,320 --> 00:10:44,010 And so right here are just another example of how the low level API might not give us the exact tools 141 00:10:44,010 --> 00:10:49,110 we were hoping to it can get a bit confusing even with a simple example there's a lot going on here 142 00:10:49,110 --> 00:10:51,020 with very little progress. 143 00:10:51,210 --> 00:10:56,310 Now we can take things back to the terminal and rerun things by calling and it's going to see that we're 144 00:10:56,310 --> 00:11:02,220 done setting up our request and it will actually fire it off if I do this what do I see. 145 00:11:02,220 --> 00:11:08,940 I can see that right here we have a few different console dot log calls printing various buffers three 146 00:11:08,940 --> 00:11:10,430 of them to the screen. 147 00:11:10,620 --> 00:11:14,470 So these chunk data that comes back is indeed a buffer. 148 00:11:14,520 --> 00:11:15,820 We want a string. 149 00:11:15,840 --> 00:11:21,150 So we're going to go ahead and convert the buffer to the string using the two string method as we've 150 00:11:21,150 --> 00:11:26,530 done earlier in the class and we're going to add the data on to the data variable. 151 00:11:26,670 --> 00:11:32,420 So data is going to equal the old value for data plus the new chunk. 152 00:11:32,490 --> 00:11:38,100 So chunk dot right here to string to convert the buffer to a string. 153 00:11:38,220 --> 00:11:44,280 Now that we have this in place we're gonna have access to the entire value the entire body response 154 00:11:44,300 --> 00:11:51,180 in the data variable down below in end we can go ahead and access it console dot log data. 155 00:11:51,180 --> 00:11:57,570 Now the data callback ran multiple times once for each chunk and is going to run a single time once 156 00:11:57,570 --> 00:12:00,520 things are done down below in the terminal. 157 00:12:00,660 --> 00:12:02,510 I'm going to rerun the program again. 158 00:12:02,520 --> 00:12:03,600 And what do we get. 159 00:12:03,600 --> 00:12:05,790 We get one thing printing to the screen. 160 00:12:05,820 --> 00:12:08,210 It has a very long string. 161 00:12:08,220 --> 00:12:10,560 This is our Jason data. 162 00:12:10,560 --> 00:12:16,780 So from here we could go ahead and pass it to get an object that we could actually pull properties off. 163 00:12:17,400 --> 00:12:19,680 So let's go ahead and get that done. 164 00:12:19,910 --> 00:12:25,820 Const I'll call this something like response body or a body equals. 165 00:12:26,070 --> 00:12:32,910 I will use Jason pass to pass a Jason string which I have stored in the data variable. 166 00:12:32,910 --> 00:12:36,800 Then I'll just print body console dot log body. 167 00:12:36,840 --> 00:12:40,190 Now if I save things and rerun the program from the terminal. 168 00:12:40,200 --> 00:12:46,230 Once again we're gonna see that instead of getting the long string we get our past object ivory around 169 00:12:46,230 --> 00:12:52,380 the program and right here our object prints and we could use this to grab the current temperature or 170 00:12:52,380 --> 00:12:56,760 grab the forecast for the next minutes days or hours. 171 00:12:56,760 --> 00:13:03,660 So this is what it takes to make a request with the core H TTP and H TTP s module and we're not even 172 00:13:03,660 --> 00:13:07,450 really done yet because we don't have any error handling set up. 173 00:13:07,530 --> 00:13:12,870 Let's go ahead and wrap the video up by seeing how you could get that done just up above between where 174 00:13:12,870 --> 00:13:16,880 we fire off their request and use end to actually send it. 175 00:13:16,920 --> 00:13:21,540 We're gonna use request dot on to set up a another listener. 176 00:13:21,540 --> 00:13:24,240 Now the event we're listening for here is error. 177 00:13:24,240 --> 00:13:30,150 This is going to get fired when an error occurs and our callback function which we provide is going 178 00:13:30,150 --> 00:13:32,900 to allow us to do something with that error. 179 00:13:32,910 --> 00:13:36,680 Now the error is the first and only argument and so we can go ahead and name it. 180 00:13:36,810 --> 00:13:39,710 And from here we could do whatever we needed to do with it. 181 00:13:39,750 --> 00:13:44,570 Now in our other files we used a bit of error handling to print one of two messages. 182 00:13:44,670 --> 00:13:48,290 In this case let's go ahead and just dump it to make sure this is even running. 183 00:13:48,420 --> 00:13:56,870 So console dot log in error then as the second argument will actually dump it to the console. 184 00:13:56,870 --> 00:14:01,550 Now with this in place we can go ahead and run the program generating an error to do that. 185 00:14:01,550 --> 00:14:05,340 We can do something simple like turn off our network connectivity. 186 00:14:05,420 --> 00:14:08,300 I'm going to disable Wi-Fi on my machine. 187 00:14:08,600 --> 00:14:11,540 Then down below I'm going to rerun the program and what do I get. 188 00:14:11,540 --> 00:14:17,090 I get the error message looking exactly like what we had much earlier in the class when we initially 189 00:14:17,270 --> 00:14:19,740 explored the error in request. 190 00:14:19,760 --> 00:14:26,860 So now that we have this in place we have a very basic HDTV s request with the core node module. 191 00:14:26,960 --> 00:14:32,540 As you can see this does provide you everything you need but at a much lower level than you probably 192 00:14:32,540 --> 00:14:33,430 expected. 193 00:14:33,440 --> 00:14:40,310 That's why in this class and in the real world people are making requests with those core modules instead 194 00:14:40,550 --> 00:14:47,240 they're using libraries like request access shows or others to make the request process much easier. 195 00:14:47,240 --> 00:14:53,390 Here are callback gets fired a single time when things are ready we either have the error or we have 196 00:14:53,390 --> 00:14:56,150 the response and the body is already sitting there. 197 00:14:56,150 --> 00:15:01,610 We don't have to do anything with it like concatenate together the individual chunks to get everything 198 00:15:01,700 --> 00:15:02,320 we need. 199 00:15:02,330 --> 00:15:07,970 Now you might be thinking why does it no just change how those core modules work to be easier to use 200 00:15:08,000 --> 00:15:11,310 and look a little bit more like a library such as a request. 201 00:15:11,320 --> 00:15:12,680 And that's missing the point. 202 00:15:12,680 --> 00:15:19,070 The core node modules are supposed to provide those low level implementations and Node comes bundled 203 00:15:19,070 --> 00:15:25,880 with NPM because you're supposed to be using NPM modules when you're building out your applications. 204 00:15:25,880 --> 00:15:28,820 That's where we're gonna stop for this bonus video. 205 00:15:28,820 --> 00:15:35,030 We took a dive into exactly how we could use the core node modules to make requests and we've learned 206 00:15:35,030 --> 00:15:42,340 a little bit more about why NPM libraries like request are so valuable to the node ecosystem. 207 00:15:42,380 --> 00:15:47,300 That is it for this video and that is it for this section in this section. 208 00:15:47,330 --> 00:15:53,600 We learned all about a synchronous node j s as we built out our little weather application. 209 00:15:53,600 --> 00:15:56,080 I'm excited to get to the next section. 210 00:15:56,090 --> 00:15:58,510 The section introduction is coming up next. 211 00:15:58,550 --> 00:16:00,080 So let's jump right in.