This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "HTTP Demonstration Part 1" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott: So I'm gonna walk through some pretty quick examples and, we'll go from there, of how to use HTTP. And then you guys are gonna have a little demo of you put the form for the widgets, you have the json file, I'm gonna show you how to make one quick edit in that file, so we can start interacting with it.
[00:00:20] And then you're gonna be posting and getting widgets from that file in that form. Cool, all right, let's do it. So let's, let's talk about getting things with HTTP. So let's just make a new file here. I'm gonna called it Reddit we'll interact with Reddit. So reddit.css I don't know if you can tell but like it's really hard for me type up here cause I'm so tall so that's why I'm like messing up my typing.
[00:00:57] So what we'll do is we'll go ahead and inject, this will be a service, so we'll just say, import, we'll come back to that, angular e slash core. Actually we'll do http here. And what we'll do is we'll go ahead and inject http. Pretty simple and then we'll also import,
[00:01:29]
>> Scott: injectable from angular2/core. Cool, so we'll just injectable. This class call RedditService, there we go. And now I just need to inject the hdp in here so we will just say Private HTTP is HTTP. Pretty simple so far, so now let's make a method to get Reddit posts and let's walk through that and go along with it.
[00:02:20] So let's just say fetch front page. We'll fetch a front page here. And then what we'll do is we'll say this.http.get and the url that we want what is it reddit.com/.json, yeah that's it. So that's the url that we want. And I'll just go ahead and make a private constant right here
[00:03:03]
>> Scott: And we wanna get this.reddit.url. So we got that and now this returns an observable. So now we immediately call subscribe. I'm sorry not subscribe, not yet go to map. We're gonna map this thing because the data's coming in a little bit different. So we want to map it, and why is it freaking out?
[00:03:28] I think I need to actually import some RSJS stuff in here. Let's see, rx, hold on. The rx story loaded up in angular 2 right now is it's kinda wonky, it's not as seamless as it should be. So let me look up the one that I need to import.
[00:03:54] There we go, yeah you gotta import the individual operators that you're probably gonna be using.
>> Speaker 2: And that's better than importing all 150 of the-
>> Scott: That's true. It is better. So now we have the map and the map is going to give access to the response from the server which we are then wanting to get the response dot json.
[00:04:21]
>> Scott: So this is just gonna return the json format for us. Again, this is why I think this this is based off window.fetch. Cuz if you ever use window.fetch it's exactly the same way, except for with third json method returns a promise. But maybe this does too, it could.
[00:04:35] So we have that, and then now let's just do a subscribe. So remember, lets just test this out. So I'm gonna make this call here and I'm not going to call subscribe. But we are going to call this method. Lets look at the network tab and see what happens and see if actually goes out and fetches.
[00:04:51] And goes to Reddit and then we'll come back and subscribe and see what's going on. So let's just put this Reddit class in our app.
>> Scott: RedditService from Reddit. What did I call it? Yeah, Reddit, save.
>> Scott: Did not export? Gotta export it, there we go. Damn, type script is awesome.
[00:05:22] All right, I like. All right Lucas, I like it. I like it. All right so let's just add that to the provider.
>> Scott: Boom. And then in app dot I guess we just do it right here. So we'll just call it right here in the constructor.
>> Scott: Fetch front page.
[00:06:01] So let's see what happens when we do that. So, if this was a promised based implementation, we would expect this to go fetch this right? If I call this method we would expect a network request to be initiated and for this to go, so let's see what happens.
[00:06:24]
>> Scott: Right now, it doesn't do anything, so.
>> Scott: All the parameters are App is occurred with injectable.
>> Scott: What,
>> Speaker 2: Do you need to type the RedditService in the instructor?
>> Scott: Yeah, that's it. Thank you.
>> Speaker 3: Blame the baklava on that.
>> [LAUGH]
>> Scott: Hopefully that's it. Let's see, refresh.
[00:07:17]
>> Scott: Yup, that was it. Man, it's high script. Okay, so, let's look at the Network tab here.
>> Scott: See anything to reddit No, let's just filter out, nope let me just refresh to make sure. Nope, nothing to Reddit, not there at all. Let's switch it out with a, just before we get there, just so we can really see this.
[00:07:41] I know my Chrome has fetch in it, so I'm just gonna say fetch right quick. And we'll just do that. So window.fetch.
>> Scott: It actually went there. Right, so that's the difference the observable didn't make the call because we did subscribe to it yet. Whereas the promise implementation of fetch did.
[00:08:09] because we, as soon as we called it, it went. All right, so that's one big difference. It's important to see that. So let's go back to the variable approach and now when I call .subscribe, it will go and actually fetch. So now we have the response here and actually, yeah we'll just do that.
[00:08:34] This will be the data actually. And we'll just console.log.bind console. We'll just log that out, let's see what happens. So it's refreshed this. Notice it did initiate the xhr this time, it went and fetched. If you're looking at console, we don't see anything because,
>> Scott: That's probably broken.
[00:09:19]
>> Scott: Let's check that out. There we go. We get this data back from Reddit. All this crazy stuff on it. It would actually be data. Any questions on that? Everybody understand the difference between how zeros are lazy versus a promise invitation? How the promise immediately went when we invoked when versus observers, like yeah, I get it but you didn't tell me what to listen to yet.
[00:09:59]
>> Scott: And then on the other side of it. Like I said. If we come down here and we say to promise, what do you think is gonna happen? Do you think it's gonna go out and fetch it or do we still have to call subscribe?
>> Speaker 2: I think we might have to call that.
[00:10:18]
>> Scott: I see.
>> Scott: Looks like it went and got it. It's greedy. It turned into a regular promise. So it literally turned into a promise and it evaluated me as soon as we invoked a function. So, very cool there.