Http request made multiple times in Angular2 service

Question

I have created a service that makes a simple GET request:

private accountObservable = null;

constructor(private _http: Http) {
}

getAccount () {
    // If          


        

Answer 1

Use Observable.share():

if (this.accountObservable === null) {
    this.accountObservable = this._http.get('./data/data.json')
      .share()
      .map(res => res.json())
      .catch(this.handleError);
}

Plunker

In the Plunker, AppComponent and Component2 both call getAccount().subscribe() twice.

With share(), the Chrome Developer tools Network tab shows one HTTP request for data.json. With share() commented out, there are 4 requests.

Answer 2

The updated solution is:

1) Change your getAccount() method to use share:

getAccount () {
    // If we have account cached, use it instead
    if (this.accountObservable === null) {
        this.accountObservable = this._http.get('http://localhost/api/account')
            .pipe(share())
            .map(res => <Account> res.json().data)
            .catch(this.handleError);
    }

    return this.accountObservable;
}

2) Add import { share } from 'rxjs/operators'; to the top of your .ts file to get rid of the error on share.

Answer 3

There are two types of observables.

Cold Observable : each subscriber receive all the events ( from the begining )

Hot observable : each subscriber receive the events that are emited after subscription.

Cold Observables are the default one. That's what the WS calling is triggered many times.

To make an Observable Hot you have to use following Rx's operators chain :

.publish().refCount()

In your case :

getAccount () {

    let accountObservable = this._http.get('http://localhost/api/account')
            .map(res => <Account> res.json().data)
            .catch(this.handleError);

    return accountObservable.publish().refCount();
}

Answer 4

In my case it was because of form post and button clik was set to same listener