Problem
I subscribe to an httpClient.get observable twice. However, this means that my call gets executed twice. Why is this?
Proof
For every subscribe() I do, I get another line in the login page.
Code (onSubmit() from login page button)
var httpHeaders = new HttpHeaders()
.append("Authorization", 'Basic ' + btoa(this.username + ':' + this.password));
var observable = this.httpClient.get('api/version/secured', { headers: httpHeaders});
observable.subscribe(
() => {
console.log('First request completed');
},
(error: HttpErrorResponse) => {
console.log('First request error');
}
);
observable.subscribe(
() => {
console.log('Second request completed');
},
(error: HttpErrorResponse) => {
console.log('Second request error');
}
);
Console
zone.js:2935 GET http://localhost:4200/api/version/secured 401 (Unauthorized)
login.component.ts:54 First request error
zone.js:2935 GET http://localhost:4200/api/version/secured 401 (Unauthorized)
login.component.ts:62 First request error
Irrelevant background
I have a LogonService object which handles al my login functionality. It contains a boolean variable that shows whether I am logged in or not. Whenever I call the login function, it subscribes to the observable of the httpClient.get, to set the login variable to true or false. But the login function also returns the observable, which gets subscribed to. Took me some time to link the double request to the double subscription. If there is a better way of tracking the login than through a variable, let me know! I am trying to learn angular :)
You may use the share
operator on your result from HttpClient.get
, like this:
var observable = this.httpClient.get('api/version/secured', { headers: httpHeaders })
.pipe(share());
You'll need to add the following import on top of your script:
import { share } from 'rxjs/operators';
The share
operator makes an observable hot
, i.e. shared between subscribers. But there's a lot more to it, I would suggest this article to dive deeper (you can of course also google up hot vs cold observables
to find more).