How To Add Headers To Http Request Angular

This postal service will be a quick practical guide for the Angular HTTP Client module. We will cover how to do HTTP in Angular in general. We will be using the new @angular/common/http module, merely a good part of this post is also applicable to the previous @athwart/http module.

We will provide some examples of how to utilize this module to implement some of the nearly mutual uses that yous will discover during development.

Introduction to the new HTTP Client module
Case of an HTTP GET
Improved Type Safety
HTTP Request Parameters (Immutability-based API)
HTTP Headers (Immutability-based API)
HTTP PUT, PATCH, POST, DELETE
Some Residuum Guidelines (specific to RESTful JSON) for using the multiple HTTP methods
The use of Generics in the new API enabling more type safe code
How To Avoid Indistinguishable HTTP Requests
How to do HTTP Requests in Parallel, and combine the Result
How to do HTTP Requests in sequence, and employ the consequence of the first request to create the second request
How To go the results of two requests fabricated in sequence
HTTP error handling
HTTP Interceptors
Progress Events
Summary

Annotation: The code for this post is also available in this repository, as a running instance.

Introduction to the new HTTP module

The multiple versions of the Angular HTTP module all have an RxJS Appreciable-based API. This means that the multiple calls to the HTTP module will all return an observable, that we demand to subscribe to one manner or the other.

Here are some central things to bear in listen regarding this particular type of Observables returned by the HTTP module:

if we don't subscribe to these observables, nothing volition happen
if we subscribe multiple times to these observables, multiple HTTP requests will be triggered (see this post for more details)
This item type of Observables are single-value streams: If the HTTP asking is successful, these observables will emit only ane value and then consummate
these observables will emit an error if the HTTP request fails, more on this later

With this in mind, let'southward have a expect at some of the most common tasks that we will come across using the HTTP library.

Installing the new HTTP module

In order to install the HTTP module, nosotros need to import it in our root module HttpClientModule:

The REST API That we will be Querying

Allow's now kickoff using the HTTP module, and utilize it to perform a simple HTTP GET. Just as a demo, we will be querying a Firebase database using the built-in Remainder capabilities of Firebase, and displaying some data direct on the screen.

This is not the most common way to query Firebase, as we normally use AngularFire together with the Firebase SDK, merely at that place is also REST support available.

This is the data that we will be querying:

Firebase Data

As nosotros tin encounter this data is a JSON structure, with no arrays. Everything is structured equally a fundamental-pair dictionary. Those funny looking strings are Firebase unique identifiers, they have some corking properties (more well-nigh them in this post).

Example of an HTTP GET

And here is an example of a pocket-size component that queries the database above using an HTTP GET, and displays the data on the screen.

This instance is using the HTTP module in a small component, that is displaying a list of courses. Allow's break downwardly this case step-past-step:

Nosotros are using the new HttpClient client module, and injecting it in the constructor
and so nosotros are calling the go() method, which is returning an Observable
This observable returns an Object straight, so the HTTP library by default assumes that we have queried a JSON API and it internally parses the HTTP response body every bit JSON
usually, we design our APIs so that they always send an object and not an array, to avoid an attack known as JSON Highjacking
and so we demand to convert the object into a list, by taking just the object values
We are and then mapping the response nosotros got from Firebase into an assortment, using the lodash values utility method
this defines an appreciable named courses$, which is consumed by the template
the async pipage will subscribe to the HTTP observable, and it's that implicit subscription that triggers the HTTP request

The end consequence is that the descriptions of all the courses in the database volition bear witness up listed on the screen, in a bulleted listing.

Improved Type Safety

Notice in the telephone call to get() that we are passing a generic parameter: we are specifying that the result of the go() call will exist an Appreciable of Grade[], meaning that this observable emits values which are arrays of courses.

If we don't specify a type parameter, and so the result of the call to get() will be an Observable<Object> instead.

HTTP Request Parameters

The HTTP Get can also receive parameters, that correspond to the parameters in the HTTP url. Let'due south accept for example the following URL with some pagination parameters:

              https://angular-http-guide.firebaseio.com/courses.json?orderBy="$key"&limitToFirst=i

This query will accept the same results equally before, but this fourth dimension ordered by the $central belongings. The offset URL parameter that we have in this URL is orderBy, and the second is limitToFirst.

This is is how we would practice this query using the Athwart HTTP Client:

Detect that we are building the HTTPParams object by chaining successive gear up() methods. This is because HTTPParams is immutable, and its API methods practice non cause object mutation.

Instead, a call to set will return a new HttpParams object containing the new value backdrop. Then this ways that the post-obit will NOT work:

If nosotros attempt to populate our parameters like this, we will not accept the expected result. Instead, nosotros would accept an empty HTTPParams object, and the two calls to set would have add no outcome.

If by some reason we already have the Query parameters cord prepared, and would like to create our parameters using it, nosotros can apply this alternative syntax:

Equivalent `request()` API

The Go calls that we saw above can all exist rewritten in a more generic API, that also supports the other PUT, POST, DELETE methods. For example, here is how nosotros could write the aforementioned request using the asking() API:

This syntax is more than generic because we are passing in an initial argument which defines the HTTP method that nosotros are using, in this case GET.

If we desire to add custom HTTP Headers to our HTTP asking, in addition to the headers the browser already attaches automatically we tin do so using the HttpHeaders class:

As we can see, HttpHeaders also has an immutable API, and we are passing a configuration object as the 2nd argument of the get() call.

This configuration object merely has one belongings named headers, just like the local const that we defined - so nosotros used the object curt-hand cosmos notation to ascertain the configuration object.

HTTP PUT

Just similar in the case of GET, we can also utilize the Athwart HTTP Client to exercise all the other bachelor HTTP methods, namely the methods typically used for information modification such as PUT.

The PUT method should only be used if we want to fully replace the value of a resources. For example, we would employ PUT if we want to overwrite a course object with a completely new version of that aforementioned class object:

This instance method could for case be part of a component course. If nosotros trigger it via a click handler in a button, we would get the following output in the console:

              PUT call successful value returned in trunk   {courseListIcon: "https://angular-academy.s3.amazonaws.com/chief-logo/main-page-logo-small-lid.png", clarification: "Angular Tutorial For Beginners TEST", iconUrl: "https://athwart-university.s3.amazonaws.com/thumbnails/angular2-for-beginners.jpg", longDescription: "...", url: "new-value-for-url"}  The PUT appreciable is now completed.

So as we can see, the PUT call will replace the whole content of the course path with a new object, even though nosotros commonly only desire to modify a couple of properties.

As well, the response body of the PUT call will contain the new version of the course object that was created later on the upload. In some cases, this might be a lot of information.

HTTP PATCH

Most ofttimes than not, instead of providing a completely new version of a resources, what we want to practice is to merely update a single property. And this is the main use instance for the use of the HTTP PATCH method!

For example, here is how we would update only the class description:

This would be the result of calling this PATCH method:

              PATCH call successful value returned in torso   {clarification: "Angular Tutorial For Beginners PATCH Exam"}  The PATCH observable is now completed.

As nosotros can run into, the PATCH method returns but the new version of the modified values, that nosotros already sent initially.

This is useful in situations where at that place is some sort of further server-side modification of the patched values, such as for example via a database trigger or a Firebase rule.

HTTP DELETE

Another frequent operation that nosotros want to practise is to trigger a logical delete of some data. This performance can completely wipe the information from our database, or merely marker some information every bit deleted. This is an instance of how we would delete a given course:

This call would trigger the following results in the console:

              DELETE call successful value returned in body zero The DELETE observable is now completed.

In the example of Firebase, this completely removes the object from the database, but we tin imagine other REST APIs where only a logical delete would occur.

HTTP Mail service

If the operation that we are trying to do does not fit the clarification of any of the methods higher up (Get, PUT, PATCH, DELETE), then we can use the HTTP wildcard modification operation: POST.

This operation is typically used to add together new data to the database, although there are many other employ cases. For example, this is how we would add a new course to the database using it:

And hither the results that show in the console when this Post request gets executed:

              POST phone call successful value returned in trunk {name: "-KolPZIn25aSYCNJfHK5"} The POST appreciable is at present completed.

When we apply the Mail service method to create data in the database, we usually want to return the unique identifier of the data that we but created, so that the client can reference that new resources if needed.

Avoid Duplicate HTTP Requests

Depending on how you apply the HTTP module, a problem that you might see is the occurrence of multiple HTTP requests. This is really the normal beliefs of the HTTP observables, but it might be surprising the kickoff time that we meet information technology.

Sometimes we want to create an observable, then subscribe to information technology directly away to implement some functionality which is local to the place where we created the observable.

For case, we might want to practise some logging at the level of the service where the HTTP observable is beingness created. Allow's have a wait at one case, still in the aforementioned component that we created higher up:

In this example, we are creating an HTTP observable, and we are doing some local subscription to it. And so this appreciable is assigned to the courses$ member variable, which will and so also exist subscribed to using the async pipe, via the component template.

This means that there volition exist 2 HTTP requests, once per each subscription. In this example, these requests are clearly duplicate as we only wanted the data to be queried from the backend once.

A new RxJs operator

There are several ways to avoid this situation, but there was recently an operator added to RxJs specifically to tackle this employ example - the shareReplay operator.

According to the author of the operator Ben Lesh:

This makes shareReplay ideal for handling things like caching AJAX results, equally it's retryable

And so let's employ this new operator, and see the results:

With the shareReplay operator in place, nosotros would no longer autumn into the situation where we have accidental multiple HTTP requests.

And this covers the main use cases for doing the most typical read and modification operations, that we would implement while doing a custom REST API.

Permit'southward at present see some other very frequent use cases, plus some more new features of the Angular HTTP client.

How to practice HTTP Requests in Parallel, and combine the Result

One fashion of doing HTTP requests in parallel is to use the RxJs forkjoin operator:

In this example, we are taking HTTP Go observables and combining them to create a new observable.

This new observable volition just emit a value when the 2 GET observables emit their value. The value of the combined observable will be an array containing the multiple results of each GET request.

How to practice HTTP Requests in sequence, and utilise the issue of the start request to create the second request

Another more than common use case is to practise 1 HTTP request so employ the result of that request to build a second HTTP request. I way of doing this is to use the switchMap operator:

Notice the use of a generic parameter in the call to get(). This is optional and it helps to go on out program more blazon safe.

If nosotros don't apply the generic blazon, then the inferred type of the course variable would exist Object, but using this parameter the inferred type is now Course, which gives us automobile-completion inside the function passed to switchMap.

Let's and then interruption down how this switchMap HTTP request chain works:

nosotros are defining a source HTTP GET request that reads the data of a grade
once that source observable emits a value, information technology volition trigger the mapping role that volition create an inner observable
the inner observable is an HTTP PUT observable that will and then send the grade modifications back to the server
the telephone call to switchMap returns a result appreciable, that nosotros subscribe to
it's the subscription to the result appreciable that triggers the subscription to the source GET observable
the values of the inner observable (that creates a PUT request) are emitted as values of the result observable.

Have a expect at this previous post on switchMap, this operator is likely to be helpful in several unlike use cases (not but this one).

For example, we can as well apply it in this other closely related use case.

How To get the results of two HTTP requests made in sequence

In the previous case, nosotros used switchMap to chain ii HTTP requests together, creating i request based on the results of the first request.

Only the result observable did not take the information of the first request, instead it only had access to the data of the second HTTP request.

If we would like to have both the data of the first HTTP asking and evangelize it together with the data of the 2d request, we could use a selector function (detect the second argument passed to switchMap):

The emitted values of the outer result observable with then become an array that contains the two value emitted by each HTTP request in the chain.

Notice that selector functions are not unique to the switchMap operator, they tin can be used in many other operators.

Besides, in these examples, nosotros have used switchMapto chain two HTTP calls, but we could keep calling switchMapon the consequence observable and keep chaining more calls.

HTTP Error Treatment

Ane of the biggest advantages of RxJs is the congenital-in error handling functionality, which is hard to become right while doing asynchronous programming.

In that location is support for many common error treatment use cases, but in the example of HTTP requests here is a very mutual functionality for mistake handling:

nosotros define an HTTP observable, that and so emits an fault
in response, we want to show an error message to the user
and then we want to still emit some sort of default value for the HTTP stream so that the screens consuming the data yet brandish something useful to the user

This is how we would implement this use instance using the RxJs catch operator:

To understand this example, let's have a look start at the console output:

              Error catched   HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/simulate-mistake", ok: false, … }  Value emitted successfully {description: "Error Value Emitted"} HTTP Observable completed...

Based on this output, here is what happened in this scenario:

The HTTP telephone call occurred and an error was thrown in our test server
the grab operator caught the exception, and executed the error treatment function
inside that office, nosotros could have for instance shown the error to the user
and so the error handling function returns an observable congenital using the Observable.of() operator
This operator creates one observable that just emits one value (the object passed to Appreciable.of()), and then information technology completes
this returned observable gets subscribed to, and its values commencement to go emitted by the results observable, so the default value gets emitted
the error observable completes, and so the result observable besides completes

Detect that by using the catch operator, the mistake handling function of the result appreciable would never get chosen, considering the error thrown by the HTTP observable was caught by the take hold of operator.

HTTP Interceptors

A new feature available in the new HTTP customer is HTTP Interceptors. An HTTP Interceptor allows usa to add some generic functionality to all our HTTP requests in only 1 place.

Interceptors are ideal for cross-cutting concerns similar for example adding an hallmark token header transparently to all the requests fabricated by the HTTP client.

This is an example of how we could implement such an authentication interceptor:

Permit's then break down the implementation of this interceptor:

this is a normal Angular injectable service, and we can inject any other services via the constructor
in this case, we are injecting a global singleton authentication service, that has access to the authentication token
the interceptmethod takes two arguments: the request being intercepted, and the next handler
the side by side.handle method needs to be called to go on the interceptor concatenation, and for the HTTP request to be fabricated
the next.handle method returns an appreciable, and this is then returned by the intercept method
this API is similar to middleware libraries such as express
the request object is immutable, so if we want to modify the asking for instance to add a header, we need to clone it
the headers object is also immutable, so as nosotros saw before we need to clone information technology and create a modified copy of it, for example using (headers.prepare())
The cloned request will now take the new HTTP header 10-CustomAuthHeader
The cloned and modified HTTP request is then returned to the middleware chain, and the resulting HTTP call will accept the new header included

In society to activate this interceptor and apply it to any HTTP request fabricated using the HTTP client, nosotros need to configure information technology in our application module by calculation information technology to the HTTP_INTERCEPTORS multi-provider:

Progress HTTP Events

Another new apply case that is supported by the HTTP client is Progress events. To receive these events, we create our HTTP request manually in the post-obit way:

This is the console output for this example:

              Upload progress upshot Object {type: 1, loaded: 2, full: ii} Download progress event Object {blazon: three, loaded: 31, full: 31} Response Received... Object {description: "Mail service Response"}

By creating the request similar this, nosotros are receiving all the following HTTP events:

an initial upload result when the asking gets fully sent to the server
a download issue, for when the answer arrives from the server
a response event, containing the body of the server response

Summary

The new Angular HTTP Customer is a great development when compared to the previous HTTP customer: it'due south more user-friendly and helps to improve the type safety of our code.

It besides supports several extra use cases: for example interceptors and progress events.

This new HTTP client will exist side-by-side with the previous HTTP module, to allow an easier migration.

I hope that this postal service helps in getting started with the new HTTP client, if yous have some questions please let me know in the comments beneath and I will get dorsum to yous.

To get notified when more than posts like this come up out, I invite you to subscribe to our newsletter:

And if y'all would like to know about more advanced Athwart Cadre features, we recommend checking the Angular Core Deep Swoop form, where the HTTP Client is covered in much more detail.

If yous are just getting started learning Athwart, have a look at the Angular for Beginners Course:

Have also a await likewise at other popular posts that you might find interesting:

Getting Started With Angular - Development Environment Best Practices With Yarn, the Athwart CLI, Setup an IDE
Why a Unmarried Page Awarding, What are the Benefits ? What is a SPA ?
Angular Smart Components vs Presentation Components: What's the Difference, When to Use Each and Why?
Angular Router - How To Build a Navigation Menu with Bootstrap four and Nested Routes
Angular Router - Extended Guided Tour, Avoid Common Pitfalls
Athwart Components - The Fundamentals
How to build Angular apps using Observable Data Services - Pitfalls to avert
Introduction to Angular Forms - Template Driven vs Model Driven
Angular ngFor - Learn all Features including trackBy, why is it not merely for Arrays ?
Angular Universal In Practice - How to build SEO Friendly Single Page Apps with Angular
How does Angular Change Detection Actually Work ?