From the course: Angular: API Communication and Authentication

API service with a central request function - Angular Tutorial

From the course: Angular: API Communication and Authentication

Start my 1-month free trial

API service with a central request function

“

- [Instructor] We have used the HTTP service directly in both our contact list component and the add contact component. While this works for small applications, this won't really scale. The API URL is hard-coded, and we really don't have a central place where all of our HTTP requests are made, which can make it difficult to debug later on. To address these issues, we need to create a robust API service that we can then inject into any component. This API service will have a central request function along with helper methods to make the different kind of HTTP request. Let's open up our terminal here, and let's start by generating a new service using the Angular CLI. We'll replace shared services in a shared folder. Note that the CLI gives a warning that it's generated but not provided. This means that we have to go into our app module and add it to our ng module. Let's do that now. And we add it to the providers property of the ng module. Heading over to the API service file we need to first input a few things. We will start by importing the necessary classes from Agular HTTP. HTTP, headers, request, request options, request method, and the response. Well, we'll also need to import the map operator from RxJS needed to map emitter values from our HTTP requests. Lastly, let's import the environment object, which is a constant that was generated for us by the CLI. Now, this is a very useful feature generated by the CLI. It is often desired to have different environment configurations, such as a development and a production configuration. When preforming a development build, which is the default by running ng build, the constant in environment.ts file will be loaded. If a production build is configured using the dash dash prod flag, the constant and environment.prod.ts will be loaded. This makes it really easy to provide different configurations. For now we will add an API URL property to both, which will be forward slash api. Let's head back to our API service. The API service will have a private property base URL, which will be set to environment.apiUrl. As in before, inject the HTTP service in the constructor. We will start by defining a central request function. The parameters for this function will be a URL, which is a string, method, which is of type request method, and a body, which is an optional parameter. We will give it the type object. The first thing we need in this function is to construct our headers. For now, we would only need the content type header, which will be application slash json. Next, we need to define the request options. Here we'll define a URL, which will be appended to the base URL. We need the method and the headers. If any body was present in the argument, then we add it to the request options. We can then create our request object, taking in the request options as the argument. Lastly, we can return an observable, which will be the result of calling the request method on the HTTP class. And here we can simply pass in our request object. We use a map operator in order to extract the response body.

Contents