Using HttpClient, HttpBackend and Observables to consume RESTful APIs

Introduction

Angular is an incredible framework and I love working with it!

Playing around and browsing the source code is an incredible learning opportunity.

One essential feature is the ability to send requests and receive data from the backend server.

What is an application that doesn’t do that?

In order to create modern and interactive solutions today with Angular, we need to know the basics of HttpClient and HttpBackend.

What is HttpClient

So, what exactly is HttpClient and why do we need it at all? Why not use simple fetch to do the requests?

It is a built-in Angular service that does some work for us. It makes it easy to send HTTP requests to a server, handle the response and in simpler words - it’s a tool that helps us to communicate with the backend.

If we open the repository of Angular in GitHub we can see that the file is relatively big and has a bunch of stuff in there.

With HttpClient we get the following important methods - GET, POST, PUT and DELETE. Let’s check an example to illustrate what is going on.

When we create an instance of HttpClient we can call the method “get” and pass two arguments - url and an object with some options. Some of them are self explanatory and I am not going to dive too much on them today, but I want to point out something!

Have a look at the responseType. Here it is defined as ‘blob’ and from that we get a response of Observable that contains a HttpEvent of type Blob.

Defining it is not required by default, but keep in mind if you are working with specific type of data.

Let’s look of this example:

I want to fetch some users and want my response to be of that type. How do I do it?

I can simply define the type of the request itself.

Check it out here

Once the request has been returned, you can subscribe and work with it.

Important thing I want to share is under the hood Angular uses XHR. The XHR object is a built-in JavaScript object that allows us to send and receive HTTP requests.

Why use HttpClient to make requests, when you can use fetch()

Well.. this is open for a debate and some people actually prefer using the fetch(), rather than the HttpClient.
HttpClient handles a lot of details such as setting headers, encoding data and handling the cookies by default. It adds consistency to the codebase.

Another thing is that Angular is built around the idea of reactive paradigm. And HttpClient is no different. It returns an Observable as we saw in the code earlier.

• It also has some built in support for interceptors
• it has some additional methods - such as HEAD, OPTIONS and PATCH
• it supports working with non-JSON data format out of the box
• customizable

If using fetch() you have to add that abstraction yourself.

What is HttpBackend

Most people haven’t used it, some haven’t heard of it.

If we browse the src folder in the http folder in the official Angular repo we can see a file named “backend.ts”

What is that?

As we can see it is an abstract class. Simple interface that provides us with the only bare minimum of the HTTP client. No fancy features. No interceptors, no response mapping.

To use it, you have to create a new instance of HttpClient and pass an instance of HttpBackend.

It provides a low-level interface for sending HTTP requests and receiving responses and that alone could be useful in some cases where you need more control over the behavior of HTTP requests.

Some cases could be:

• getting the bare minimum and implementing custom HTTP behavior
• improved performance and size, since a lot of the features are just missing
• very specific custom and complex request

That leads to manually handling eros and parsing your responses.

I have seen this implementation myself only once and most of the time you will know you need it.

In like 99% of cases.. you probably don’t.

I am interested - have you implemented it and in what conditions?

Important note - when using the HttpBackend you must know that it bypass as of its nature the interceptor chain

This could be useful if you need to create requests that you don’t want to go through the interceptors.

You won’t need to create some fancy solutions and handle conditionals logic.

Just create a service and do the requests you need through it!

The Holy Observable

Observables play an incredibly important role in working with HttpClient and HttpBackend in Angular.

As we saw, the request returns Observable of specific type.

I have written a little article on how I usually work with Observables and I am planning to go a lot deeper in the future and create some cheat sheets for all of us to use.

If that is something of your interest.. a follow would be nice.

Conclusion

So much to learn and so many different implementations and ideas.

Incredible framework with incredible power.

I absolutely love working with it and am eager to learn all the time.

HttpClient and HttpBackend are incredible tools that allow us to make complex and interactive applications.

All the features we get from HttpClient do a lot of the heavy work for us and implementing it is as easy as possible.

Thank you for your time and don’t forget to follow me for more!