Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

HTTP requests with the new Angular 4 HTTP Client

Tuesday, November 7th, 2017 by Servage

angular-4Angular 4.3 comes with a new way of sending HTTP requests: the HttpClient class. The older Http class can still be used and it is not deprecated, at least for now. However, HttpClient brings some new features and will likely replace the old class in the future. Let’s go through some of the features the new HttpClient has to offer.

Modifying Requests with Interceptors

One of the handy new features is the ability to intercept HTTP requests with interceptors. Intercepting a request means modifying it on the fly. One common use case for interceptors is to attach a session token to every request automatically to easily authenticate with an API.

Interceptors are classes that receive an HTTP request object, create a copy of the request, modify it and return the modified request object. The original request is discarded and only the modified one is sent over HTTP. The reason why a new copy of the request is created is because the request objects are immutable and cannot be changed. It is also possible to intercept responses in the same way.

Typed Responses

When using the older HTTP client, the client is not aware of what type of response to expect back from a request. Because of this, features such as the JavaScript dot notation (accessing properties using the “object.property” format) are not available. With the new HTTP client, you can map responses with models you have created for your application.

For example, if you send a “GET /books/1” request, you can expect it to return a Book model. You can create an HTTP request with type checking like this: httpClient.get<Book>(‘/books/1’).subscribe(book => {}). The book variable will now contain a Book object.

JSON as Default Return Type

In the past, you have had to call response.json() to get a JSON representation of HTTP responses. This is no longer needed since the new HTTP client expects all requests to be in JSON format and does this in the background.

Progress Events

When transferring large amounts of data, providing feedback of the transfer progress is a good idea. With HttpClient, you can listen to events that contain the amount of data that has been transferred and the total amount of data to transfer. These two amounts can be used to calculate a percentage such as “25% of a file has been uploaded so far”.

New Module

To get started with the new module, you should import HttpClientModule from @angular/common/http instead of using the older HttpModule. The module should go the imports array of app.module.ts after the line where you import BrowserModule. Therefore, your imports array might look like this: imports: [BrowserModule, HttpClientModule].

After importing the module, you can inject the HttpClient class to your components and services in the constructor. This works exactly the same way as before with the older Http class.

HTTP requests with the new Angular 4 HTTP Client, 5.0 out of 5 based on 1 rating
Categories: Software & Webapps

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.