5.3 Making HTTP Requests From the Service

So now that we have our basic service skeleton created, let's go ahead and finish our implementation. So back here in our lawn.service.ts file, what we wanna do now is actually create all of the client side methods or functions that can call our back-end service that we created using Express. So how do we do that? Well the first thing that we're gonna need to know is where does this service live, where on the back-end are we sending these HTTP requests. And if you recall, because we set up that express application, we know that it's running on local host, we know that it's listening on port 3000, and we know that we have created a route for that server that is paying attention to slash lawns. So we know what our URL looks like, we know it's running on local host port 3000/lawns, so that's kinda the base URL that we're gonna be dealing with. So typically that's the first thing I like to do is define that, so I'm gonna create a private variable here called baseUrl and I'm gonna set that equal to http//localhost port 3000/lawns. So now you could take this and put it off into a configuration file, that's a perfectly valid way to do this. But since this is the only service we're dealing with and this is the only URL, kind of base URL that we're gonna be dealing with, I'm gonna leave it here directly in the service, okay. So now what we wanna do, is we wanna start to create mirrors of those APIs on the front-end and this is pretty simple. And you're gonna see once we start to do this that you can create as many of these as you need and you're very flexible you're really kind of open to creating as many of these however you would like. So I'm gonna create a public function here, I'm gonna call this getalllawns, so that's gonna mirror the getalllawns that we were creating before. Now there's no parameter here we don't need to pass anything, remember this is just going at that base. And we need to provide a return value, now, typically when you're dealing with HTTP requests, you don't wanna sit there and wait for it so you're typically dealing with promises. And in the world of Angular, that kind of translates into the concept of an observable, so we wanna return an observable which is going to actually bring in the type of observable from the ReactiveX library, so that's gonna bring that in. And this is generic, so what is really gonna live within that observable and it's going to be a lawn but not only a lawn, it's gonna be an array of lawn objects. So the call to this particular method is gonna return back an observable of a lawn array. So what is this gonna look like? Okay, so what we're gonna need to do here is, we're gonna need to build the full URL that we're gonna be dealing with here and so we're gonna say const url is going to be equal to. And using backticks because this is a good habit to get into when you're building URLs like this, this is simply gonna be this, that base URL and we can leave a slash on there if we want, that should be fine. And then now that we have our URL that we wanna return this data from, we're going to return this .http client. And what operation are we performing? A, get, and this is also a generic, so what are we expecting to get back from this get a lawn array? And we're passing this, the URL we just built before, so as you can see here now, I can take advantage of that HTTP client. I'm going to be making a get call, I'm expecting to get back an array of lawn objects and if you see here, this is not coincidental that the observable type that we're dealing with here is the same type that we're expecting to get back from this get. So make sure that those things to correlate and then we're gonna be sending this operation to the URL that we built here before. All right, so pretty simple, let's go ahead and do another one. Let's do public getLawn, so this time we're gonna be getting an individual lawn so we're going to need to know the idea of that lawn and that is going to be of type string, And this once again is going to be returning an observable but this time we're expecting to get an individual lawn this time, not a bunch of them. So let's build another URL, and this time it's going to be very similar to what we just did, it's gonna be this.baseUrl, but remember, we're gonna need to pass that id in there. So then we'll make sure we have that slash, and then we'll do another dollar sign here and we'll pass in that integer, just like this. So that's what that URL structure is gonna look like to get back the individual one. And we're gonna simply do return this dot http client, we're gonna be doing get again, this time expecting to get back an individual lawn and passing that to the URL. All right, so we're on a roll, let's keep going. So we had the two get operations, let's do a, let's do an add operation. So we'll say addLawn and in this case we're gonna be expecting to be passing in a new instance of a lawn. So we'll say newLawn, which is gonna be type Lawn and in this case we are going to be expecting to be getting back an observable once again. A new instance of a lawn, remember cuz we're gonna be getting back a new instance of a lawn that has an ID in there so we can work with it. So in this case we'll build our URL again, const url = to, and this is actually gonna be the same because when we're doing the post operations, we're doing a post to that root URL, so we'll just re-use that one. And then down here, we're simply going to say return, this .http client, now this time, we're gonna be doing a post, and we are going to be dealing with a Lawn here again and we are going to be going to a particular URL. And now if I need pass additional data along, that's gonna come in the form of the second parameter to this function post and it's gonna be the body. And as you can see, it can take in anything so we can pass any sort of object in there that we want. So we're gonna pass in newLawn, all right, so now we can add, let's do an update. So we'll say public updateLawn and in this case once again, we are gonna be taking in a lawn. This time it's gonna be updated, and we are going to be doing the same observable here, I'll type lawn. Then we will go ahead and do a URL, which is going to be the same URL that we used for getting an individual one, cuz we need to be able to pass in that ID that we got from Lawn. But now remember, when it comes to this Lawn object, we are gonna be dealing with the underscore ID, as you see right here because that's the way we defined it to more better map to what were working with on the back-end with Mongo. So here's our URL and now we're going to say return this.httpClient and then we'll do a put, that's the operation we're gonna use to do an update. We're expecting lawn, we're gonna pass that to this particular URL and we're gonna send in this new lawn object just like that. All right, so we're almost done, we've got two gets, an add, an update, and the last thing we need to do is a deleteLawn, and this is gonna look very similar to what we've been doing before. We're gonna pass in lawn just like that, in this case we're not too concerned about an observable, at this point we're just gonna assume that if the operation doesn't bomb, it doesn't fail, then it went correctly. Because I'm not expecting to get back an object that is something that isn't there anymore, so we're gonna be using actually this same URL. So we'll copy that, we'll paste that in and we'll go ahead and do return this .httpClient.delete and we are going to be deleting the lawn._id just like that. All right, so we'll go ahead ad save all of this, now I know that seems like a reasonable amount but if you think about it really, that's pretty simplistic compared to what we did on the back-end. So all we really had to do was create our base URL, and then create all of the operations that we're gonna want to use throughout our application. A couple of gets, an add, an update, and a delete and then all we have to do is build URLs for each one of those and then execute whatever http request we wanna do using our http client. So now we have our service ready to go, we can start to use this in all the other spots within our application including the components which we're gonna start building next.