This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "The HTTP Module" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott Moss: We're going to talk about HTTP, how to interact with the server. So you noticed that you got that JSON server thing. This is reading from a JSON file, there's this command line tool, that reads, pretty much creates a restful server from a JSON file, so we'll be interacting with that file, it's pretty legit.
[00:00:21] So this is given to some of the slides, see what's going on here.
>> Scott Moss: Cool, server communication. So, there's a built in http module, like I said, Inger two is like the complete package. So, what are some of the ways we can interact servers right now in the web browser?
[00:00:42] Well, of course we have Hxr, which is built in most browsers, now have windows.fetch, which is the preferred method now. If you've never used fetch, open up Chrome, type in fetch and you'll see it, and then JSONP, of course. So, Angular 2's limitations, I'm not actually sure what it's based on.
[00:01:01] If I had to guess, I'm guessing it's based off fetch, but it does have observables in it, so it's kind of its own thing. Like I said, it's built in with the server and has error handling and the stuff you would expect from most AJAX HTTP libraries. So nothing too crazy.
[00:01:21] The module itself just wraps XHR or REST, I'm not sure yet, and definitely JSONP, it just makes it easier for you. But even still, it's still low level. You can even wrap this library, make your own, which is what I suggest eventually. So by default, it does return observables.
[00:01:41] If you don't know what observables are, we're going to touch a little bit on them. But if not, you can convert to the promises easily and feel comfortable with those. So don't fret.
>> Scott Moss: So standard methods here.
>> Scott Moss: Nothing new.
>> Scott Moss: This is an example. So once you would inject the HTTP module into one of your components or another service, it looks something like this.
[00:02:09] So the method's like in the first example, is get, takes the URL and then the next method might look confusing because map is a method that we use on arrays, what's going on here? I don't know. Okay, well, that's because remember HTTP returns an observable, and map is an operation on AJAX, which allows us to map one of the pieces of data coming in from the stream.
[00:02:32] So, that's what we're doing. And then we're automatically converting it to a promise, so it looks like exactly what it'd look like if you got it from an Angular 1 AJAX call, or jQuery if you called to promise on it. Same thing for the one below, except we're doing a post.
[00:02:47] So unlike most modern http libraries that automatically restringify your body for you on your post and your put requests, right now Angular doesn't. But in the docs, it says right there, this may change in the future, so I don't know. Right now you have to stringify it yourself.
[00:03:06] So make sure you do that. And which probably means you'll probably have to set the headers yourself too for application JSON to accept that, otherwise you might get errors. So this is why I'm thinking it's based off window dot fetch because window dot fetch is exactly the same way.
[00:03:21] And again, it returns observable that we're converting to a promise. Don't worry, this looks foreign. It's not that crazy, we'll get into it, I promise.
>> Scott Moss: So here's an example of a put. Again, you have to stringify it yourself, passing the different headers. Same examples here, another example of a delete.