richiesta HTTP effettuata più volte in servizio Angular2

Question

ho creato un servizio che rende una semplice richiesta GET:

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; 
} 

ho aggiunto che il servizio nella mia funzione di bootstrap per fornire a livello globale (la mia speranza è di fornire al stessa istanza a tutti i componenti):

provide(AccountService, { useClass: AccountService }) 

Il problema è quando chiamo questo servizio in diversi componenti, una richiesta GET viene effettuata ogni volta. Quindi, se lo aggiungo a 3 componenti, verranno fatte 3 richieste GET anche se controllo se esiste già un osservabile.

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

Come si può impedire che la richiesta GET venga eseguita più volte?

Answer 1

Uso Observable.share():

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

Plunker

Nel Plunker, AppComponent e Component2 chiamano entrambi getAccount().subscribe() due volte.

Con share(), la scheda Rete degli strumenti per sviluppatori di Chrome mostra una richiesta HTTP per data.json. Con share() commentato, ci sono 4 richieste.

Answer 2

Esistono due tipi di osservabili.

fredda osservabile: ogni abbonato riceve tutti gli eventi (dall inizio)

Hot osservabile: ogni abbonato di ricevere gli eventi che vengono emited dopo abbonamento.

Cold Observables sono quelli predefiniti. Questo è ciò che la chiamata WS viene attivata più volte.

Per effettuare una calda Observable è necessario utilizzare seguente catena di Rx operatori:

.publish().refCount() 

Nel tuo caso:

getAccount() { 

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

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