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 requests in . Http Angular 7 Http requests in applications is a little different from what we are accustomed to with the first version of Angular, a fundamental difference is that the in returns observable objects. Angular 7 HttpClient Angular 7 It’s fair to say that most of the looks completely different from the and the Http is not a exception. The service that provides us works great for most use cases and it is intuitive enough to use. In Angular 7, requires that we learn some new concepts, including how to work with Angular 7 Angular 1.x API $http Angular 1.x HttpClient observable objects. Differences between Angular 1.x $ http and Angular 7 HttpClient In Http implementation provides a simplistic way of handling requests but there are some important differences. Angular 7 Firstly, http calls in return objects observable through by default, while in returns promises. The use of observable flows provides us with greater flexibility when dealing with responses from Http requests. Angular 7 RxJS $http Angular 1.x 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 operators in our observables. RxJS Already in 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. Angular 7 HttpClient In , we would do this by providing a function or for our options, we can transform requests globally in the application configuration. Angular 1.x transformRequest transformResponse $http In we will implement the interface. Angular 7 HttpInterceptor 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 route that doesn’t require authentication. /api/clients 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 return observable objects, so we need to use methods to operate on them. Angular 7 RxJS 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 access the . Angular 7 complete documentation Conclusion Http requests in is definitely a different approach than what was done in 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 operators on them and returned flows will behave the way we like it. Angular 7 Angular 1.x RxJS In this article we have seen how Http can be used to make and requests for authentication but we can also use other types of HTTP requests like and . We also saw how we can customize the headers we send with class. GET POST PUT, DELETE PATCH Headers 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 _Edit description_angular.io Angular Docs _Edit description_reactivex.io ReactiveX _AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with…_docs.angularjs.org AngularJS _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 Using Angular $Http and Angular 2 Http - Angular 2 Series Part 3