Angular 2 observable subscribing twice executes call twice

Question

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 :)

Answer 1

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).