Angular 7 — HTTP Exploration

After a long long long time without posting the free time and boredom made me inspired so let’s share a little bit of what I have been studying in the last few months. This post will be about Http requests in Angular 7.

Http requests in Angular 7 applications is a little different from what we are accustomed to with the first version of Angular, a fundamental difference is that the HttpClient in Angular 7 returns observable objects.

It’s fair to say that most of the Angular 7 looks completely different from the Angular 1.x and the Http API is not a exception. The $http service that Angular 1.x provides us works great for most use cases and it is intuitive enough to use. In Angular 7, HttpClient requires that we learn some new concepts, including how to work with observable objects.

Differences between Angular 1.x $ http and Angular 7 HttpClient

In Angular 7 Http implementation provides a simplistic way of handling requests but there are some important differences.

Firstly, http calls in Angular 7 return objects observable through RxJS by default, while $http in Angular 1.x returns promises. The use of observable flows provides us with greater flexibility when dealing with responses from Http requests.

For example, how to repair a failed Http request is automatically forwarded, which is useful for cases where users have slow or intermittent network communication.

We will see later in the article how we can implement RxJS operators in our observables.

Already in Angular 7 HttpClient is accessed as an injectable class and just like other classes, we import when we want to use it in our components and also comes with a set of Http injectable interceptors, which are imported via HTTP_INTERCEPTORS.

In Angular 1.x, we would do this by providing a transformRequest function or transformResponse for our $http options, we can transform requests globally in the application configuration.

In Angular 7 we will implement the HttpInterceptor interface.

Exploring HttpClient

In the course of this article we will see how to work with POST and GET requests, which will require that we retrieve and store a JWT (Token), so we will implement a basic authentication.

GET request

Let’s start with a simple GET request for the /api/clients route that doesn’t require authentication.

The getAll method starts looking rather familiar — we make an http.get request passing a URL as an argument. Remembering that in the 1.x Angular $ http case this is where we would consume the promise that we started and that will be returned using .then, but as you can see here, we are doing something considerably different.

As previously mentioned, Http calls in Angular 7 return observable objects, so we need to use RxJS methods to operate on them.

POST request

Our authentication method will need to make a POST request to the back end and specify the content type so we can submit our credentials. For this, we’ll use headers.

The authentication method accepts data that is transmitted from the view when the form is submitted. We are getting his username and password and making a string of credentials in the way that server waits.

The request happens and from here the returned observable object is treated in the same way as we saw in the GET request. Subsequently we store the token that is received in the localStorage.

For more details on the implementation of Http requests in Angular 7 access the complete documentation.

Conclusion

Http requests in Angular 7 is definitely a different approach than what was done in Angular 1.x but with the change comes a great boost in capability. Requests where return is observable objects is great because we’ll be able to use RxJS operators on them and returned flows will behave the way we like it.

In this article we have seen how Http can be used to make GET and POST requests for authentication but we can also use other types of HTTP requests like PUT, DELETE and PATCH. We also saw how we can customize the headers we send with Headers class.

Good studies, leave your comments and see you next time !!!

This post is a translation of the portuguese version. So then forgive me if you find any mistake and let me know to fix it.

Thanks ❤

References

Angular Docs_Edit description_angular.io

ReactiveX_Edit description_reactivex.io

AngularJS_AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with…_docs.angularjs.org

Using Angular $Http and Angular 2 Http - Angular 2 Series Part 3_Learn the differences between $http in Angular 1.x and Http in Angular 2. Find out how to use the RxJS Observables that…_auth0.com