Image for post
Image for post

Angular 4.3 HttpClient (Accessing REST Web Services With Angular)

This post has been published first on CodingTheSmartWay.com.

Subscribe On YouTube

In Angular 4.3 the new HttpClientModule has been introduced. This new module is available in package @angular/common/http and a complete re-implementation of the former HttpModule. The new HttpClient service is included in HttpClientModule and can be used to initiate HTTP request and process responses within your application.

Let’s see how to use the new HttpClient in your Angular 4.3 project.

Setup a New Angular 4.3 Project

The first step is to initiate a new Angular 4.3 project. The easiest way to do so is to use Angular CLI (Angular command line interface).

If you have not installed Angular CLI on your system yet, you first need to execute the following command to install the latest version:



Now you can use the ng command to initiate a new Angular project:



A new directory nghttp01 is created, the project template is downloaded and the dependencies are installed automatically.

Next open package.json in your favorite code editor and check that all Angular dependencies contain a version number of >4.3.0.

Having updated the package.json file you need to execute the command



in the project directory in order to make sure that the corresponding packages are updated.

Making HttpClient Available In The Project

To be able to use the HttpClient service within your components we first need to include the HttpClientModule in the Angular application. First we need to import HttpClient module in the application’s root module in file app.module.ts:

Once imported you can make use of HttpClient in your components. To make HttpClient available in the component class you need to inject it into the class constructor like you can see in the following:

HttpClient will use the XMLHttpRequest browser API to execute HTTP request. In order to execute HTTP request of a specific type you can use the following methods which corresponds to HTTP verbs:

  • get
  • post
  • put
  • delete
  • patch
  • head
  • jsonp

Using HttpClient To Request Data

Let’s implement a simple example which uses GitHub’s REST API to request user data. Insert the following code in file app.component.ts:

The output which is displayed in the browser console should look like the following:

Image for post
Image for post

The results shows that it’s possible to directly access the JSON response by subscribing to the Observable which is returned from the get method.

Typed Response

From the console output you can see that the returned JSON object has a lot of properties. If you now try to access one of those properties by using the dot notation you’ll get back an error:



The error message is saying: “Property 'login' does not exist on type 'Object'”. As data is of type Object you can not access properties directly. However we're able to cast the response Object to a type which is containing the corresponding properties. Let's define an interface type which is containing some if the properties which are part of the response:

Next, let’s make use of UserResponse to cast the return type of the get call:

Accessing the values by using data.login, data.bio and data.company is possible now. The output in the browser console should no deliver the following result:

Image for post
Image for post

Error Handling

A HTTP request can fail. Because of a poor network connection or other circumstances which can not be foreseen. Therefore you should always include code which handlers an error situation. Adding a second callback method to the subscribe method is the way this is done:

You can also get more specific information about the error by defining a parameter of type HttpErrorResponse for the error handler function. HttpErrorResponse needs to be imported from @angular/common/http:

Using HttpClient To Send Data

Next, let’s see how data can be send via HttpClient. For sending data we’ll be using the post method of the HttpClient object. Of course we need a backend which offers a REST API which accepts POST HTTP requests. To avoid setting up our own backend API we can instead make use of JSONPlaceholder which is a fake online REST API for testing and prototyping (https://jsonplaceholder.typicode.com/).

The endpoint http://jsonplaceholder.typicode.com/posts is support POST HTTP request. Let’s use that endpoint to create a new post record:

Here you can see that the data of the post request are passed to the post method as a second parameter in JSON format. We’re getting back a response which is confirming that the object has been created succesfully:

Image for post
Image for post

Interceptors

One of the new features of the new HttpClient module is the availability of interceptors. Interceptors are sitting in between your application and the backend. By using interceptors you can transform a request coming from the application before it is actually submitted to the backend. The same is possible for responses. If a response arrivers from the backend a interceptor can transform that response before it arrives in your application.

The best way to discover how interceptors work is to implement a simple example. Create a new file githubauth.interceptor.ts and insert the following code:

The interceptor class GithubAuthInterceptor implements the interface HttpInterceptor which is part of the @angular/common/http library. Implementing this interface requires us to add the intercept method to the class. This method is doing the main work of the interceptor. The method is expecting to get two parameters. The first parameter is containing the original request. The second parameter is the next HTTP handler to which the request needs to be passed on for further processing.
In this first example the intercepts method is just passing on the original request to the next handler. Having understood the interceptor approach we can now move on and manipulate the request in the intercept method:

First we’re creating a new request by using the clone method. At the same time we’re passing in an JSON object containing the headers property. We’re using the req.headers.set method to create a new header entry for the Authorization property. This property is used to submit the GitHub access token.

Finally the newly created request object (with the header included) is passed on for further processing by using the next.handle method.

Providing The Interceptor

In order to activate the interceptor for our application we need to provide it to the main application module AppModule in file app.module.ts:

First we’re importing GithubAuthInterceptor and in the second step we’re inserting a new object to the array which is assigned to the providers property of @NgModule. This object is containing three properties:

  • provide: needs to be set to HTTP_INTERCEPTORS in order to specify that a HTTP interceptor is provided
  • useClass: needs to be set to our interceptor class type
  • multi: needs to be set to multi to tell Angular that HTTP_INTERCEPTORS is an array of values, rather than a single value

Now the Interceptor is active and the Authorization header is added to every request which is sent out automatically.

This post has been published first on CodingTheSmartWay.com.

CodingTheSmartWay.com Blog

CodingTheSmartWay.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store