żądania HTTP wykonane kilka razy w Angular2 usługi

Question

ja stworzyliśmy usługę, która sprawia, że ​​prosty wniosek otrzymujemy:

private accountObservable = null; 

constructor(private _http: Http) { 
} 

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

    return this.accountObservable; 
} 

Dodałem, że usługa w mojej funkcji bootstrap świadczenia globalnie (mam nadzieję, aby zapewnić to samo wystąpienie dla wszystkich składników):

provide(AccountService, { useClass: AccountService }) 

Problem polega na tym, że wywołuję tę usługę w różnych komponentach, żądanie GET jest wykonywane za każdym razem. Jeśli dodaję go do 3 komponentów, zostaną wysłane 3 żądania GET, mimo że sprawdzam, czy obserwowalne już istnieją.

ngOnInit() { 
    this._accountService.getAccount().subscribe(
    account => this.account = account, 
    error => this.errorMessage = <any>error 
); 
} 

Jak mogę zapobiec wielokrotnemu zgłoszeniu żądania GET?

Answer 1

Korzystanie Observable.share():

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

Plunker

W Plunker, AppComponent i Component2 oba wywołania getAccount().subscribe() dwa razy.

Na karcie Sieć narzędzia Narzędzia dla deweloperów Chrome jest wyświetlane jedno żądanie HTTP dla data.json. Z komentarzem share() są 4 żądania.

Answer 2

Istnieją dwa rodzaje obserwowalnych obiektów.

Zimna Obserwowalne: każdy abonent otrzyma wszystkie zdarzenia (od początku)

Hot obserwowalne: każdy abonent odbierać zdarzenia, które są emitowane po subskrypcji.

Cold Observables są domyślne. Właśnie to wywołanie WS jest uruchamiane wiele razy.

Aby obserwowalnych Hot trzeba użyć następujących RX operatorów sieci:

.publish().refCount() 

W twoim przypadku:

getAccount() { 

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

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