Getting data using REST requests - Angular Tutorial

- [Instructor] Let's add a feature to our web storage service that lets users get the current filter state from a remote database using REST requests. REST stands for representational state transfer. It's a set of web standards that define how software sends and receives data using the HTTP protocol. Angular comes with full support for REST requests, so we should take advantage of it. First, I'll open up our web storage service file, source, app, services, web-storage.service, and I'll import Angular's HttpClient class into this file. I'll make a new line at the top and type import HttpClient from @angular/common/http. Next, I'll instantiate the HttpClient class in the constructor. I'll make a new line here followed by private http: HttpClient. You can use any variable name you like, but it's common to use something like HTTP here. Now, there are many ways we could set up the code here in our service, but to keep things simple, I'm going to make two new methods, one to get data from the server and the other to send data back to the server. I'll make a new line under the set method and type public getRemote() {}. Inside this method, we'll use the HttpClient instance to get data from a URL. I'll make a new line and type this.http.get. The get method takes two arguments. The first is a URL string pointing to the data you want to get from the server, and the second argument is optional. It's an object with additional data you want to send with the request. This is where you put things like request headers, URL parameters, and authentication credentials. We don't need to pass in any options, so we won't need that second argument. We do, however, need a URL. And this is where things get interesting. I built this course to be self-contained. So instead of using a real remote server, I created an HTTP interceptor instead. Let me show you. It's under source, app, mocks, user-list-interceptor.service. HTTP interceptors are a lot like the custom error handler we made earlier in this course. They let you examine and modify the HTTP request before you pass it back to Angular's HTTP service. You might use an interceptor to add authentication headers to every get request, or maybe you want to alias a short URL to a much longer one. HTTP interceptors are a great place to do that. We're using an HTTP interceptor here to mock calls to a remote server. Let me show you what it does. I implement Angular's HTTP interceptor here on line eight. I also have these two private properties. One is called API_URL. This is the URL we pass into the get request, the PUT method, anything like that in our other files. And I have this storage key called MOCK_API_FILTER. This is the key we're going to use in local storage later on in this file to store the data, essentially. Interceptors have only one method called intercept. This method returns an observable, and it takes two arguments. The first is the HTTP request itself, and the second is the handler. This is essentially how you dispatch the next request in a stream of requests. So the first argument is essentially the current request, and next is how you dispatch that request back to whatever's requesting. Inside this method, I have two if statements. If the request URL is equal to our MOCK_API_FILTER URL, and the request type is of get, then we're going to call this getFilter method, which I'll show you below. If the request URL is equal to our mock API, and the request is PUT, then we're going to return a different method, setFilter, also below. If the request is something other than those two things, we're just going to return it as usual, no changes. For a get request, we have this method down here, getFilter, which also returns an observable. And basically, what I'm doing is I'm sending back the status of 200, that's the HTTP status, as well as the body, which is the actual data from local storage. And this is that storage key I mentioned earlier above. So this here is how we transform an HTTP REST request into a call to local storage. It's a little funky, and for most projects, you probably won't do something like this, but again, I'm trying to keep this core self-contained. So we are pretending that these HTTP requests are coming from a remote service, even though everything is stored in local storage. Finally, we complete the observer. Same idea for set filter down here. We pass in a filter string, which we send into local storage using the same storage key. And then we just call getFilter again. Back in our web storage service, I'll set the URL for the HTTP get method to the same URL we used in the interceptor. So I'll type /mock/api/filter. The HTTP get method returns an observable that we can pass directly into the user list component. So I'll just add a return keyword to the start of the line here. The details of what observables are and how they work are outside the scope of this course. So for now, just think of them as promises with additional features and benefits. The last thing we want to do is set the return type for our getRemote method. This is going to be of type Observable, and it will return a string. If you're following along in VS Code, you might get a wavy line on the HTTP get request. That's okay, this is feedback from the editor telling us that there's an issue. I can hover over to get more information. And what it's telling me is that the type Observable<Object> is not assignable to the type of Observable<string>. This is something interesting that Angular added in more recent versions of Angular, where essentially there's a disconnect between what the get request is expecting by default and what we might be sending back to other files that are using our custom getRemote method. The easiest way to solve this is to declare the generic type on the get method, which in this case is going to be string. And that solves our error. This method is set to go. Next up, we'll look at sending data back to a server using the HTTP PUT method.