by

HTTP Client usage in Angular

In this section, thought to talk about HTTP-Client usage in angular and how its different from existing HTTP Module. It has RxJS Observable-based API. It means that the multiple calls to the HTTP module will return an observable, which we need to subscribe.

Salient Features:-

  • If we don’t subscribe to these observables, it won’t work.
  • If we subscribe multiple times to these observables, multiple HTTP requests will be triggered.
  • If HTTP request is successful, it will emit only one value and then complete
  • If HTTP request fails, then these observables will emit an error.

Here, in the application, we need to refer HttpClientModule like shown below.

And corresponding HTML

Here, Its a very simple code. Here, I am just making a request to URL and flushing the incoming value on the page. Here, you can notice that http get method returns one observable. Here, I am also mapping incoming value with my interface just for making it type compliant and with returning observable. Having said, when I click on the button, it will fetch the posts like shown below.

Here, async pipe will subscribe to the HTTP observable, and it’s that implicit subscription that triggers the HTTP request. Now, we can send filter with request to filter data as required.

Below is the modified call.

Having said that, it will produce the following output.

Here, I filtered it by userId 7. This is fine, but think of building complex query. In that case, above params approach doesn’t work well. In order to fix that kind of scenario we can make use of HttpParams() like shown below. Here, we can build chain of HTTP-Headers as well. This is because HTTPParams are immutable, and its API methods do not cause object mutation

This will also produce the same result. We also have the support of HttpHeaders. This utility heavily used in terms of authentication. Let’s imagine we want to send a request that can only be performed by currently logged in user. In that case, we can JWT with auth details in the header and then server will decode this token to validate whether the user has permission to access the resource or not? Here, I have modified the code for headers.

Now, when I click on the button, then in network tab in chrome developer tool, we can see the below result.

Now, let’s create a Post request. Below is the finished snippet with Post as well.

And corresponding markup change,

Having done above change, When I click on New Post button, it will print the following result. One of the most powerful features of HTTP-Client is, we can use any rxjs operator on this. Let’s suppose we want to filter down the data further. Then, we can do something like

Having said that, when I check the output, it will print like

Now, let’s suppose, when I try to hit an endpoint which actually doesn’t exist, in that case, below snippet will try to reach the endpoint atleast 5 times and then it will print the error message like shown below.

Now, it will give below result.

Now, let’s see some other important use cases of this. Now, let’s say, we would like to make parallel requests to different endPoint and then want to combine the result. Below is the finished code for the same.

And corresponding markup looks like shown below.

With the above change in place, When I click on Parallel Request button, it will print the following values in console.

Now, let’s see how to do HTTP Request in sequence and use the response of first sequence to create the second request. One way of doing this is via switchMap operator. Below is the finished code for the same.

You can use something like shown above. Another new feature available in the new HTTP client is HTTP Interceptors. An HTTP Interceptor allows us to add generic functionality to our HTTP requests. Interceptors are ideal for cross-cutting concerns like for example adding an authentication token header. Below is the example for the same.

This is normal example of angular injectable service. Here, we are injecting Authentication Service which has the access of authentication token. The intercept method takes two arguments; request and handler. next.handle method needs to be called to continue the interceptor chain and for the HTTP Request to be made. It returns an Observable and then its returned by intercept method. The request object is immutable, hence if we want to modify the request header, we need to clone the same and then we can create modified copy of the same. The cloned request will have new HTTP header X-CustomAuthHeader.   In order to activate this interceptor and apply it to any HTTP request made using the HTTP client, we need to configure it in our application module by adding it to the HTTP_INTERCEPTORS multi-provider as shown below.

Last but not least, it has also given progress events. To receive these events, we need to configure like shown below.

With this, I would like to wrap this post. I hope you would have enjoyed this post. Thanks for joining me.

Thanks,
Rahul Sahay
Happy Coding