Wie cache und teile ich Http get() Antwort?

Question

Nach diesem Kurs https://www.pluralsight.com/courses/angular-2-getting-started und Github Materialien product.service in diesem Kurs versuchen, vermeiden, http.get() Anfrage jedes Mal, wenn ich auf den Link klicken aufrufen. Ich denke, es ist eine große Verschwendung, Datei jedes Mal zu laden, anstatt es als ein Objekt im Speicher zu speichern.

Der Versuch, diesen Code zu ersetzen:

getProducts(): Observable<IProduct[]> { 
    return this._http.get(this._productUrl) 
     .map((response: Response) => <IProduct[]> response.json()) 
     .do(data => console.log('All: ' + JSON.stringify(data))) 
     .catch(this.handleError); 
} 

mit dieser:

public _observable: Observable<IProduct[]>; 

    getProducts(): Observable<IProduct[]> { 
    console.log('_observable before: ' + (this._observable)); 
    if(this._observable===undefined){ 
     console.log('_observable inside 1: ' + (this._observable)); 
     this._observable=this._http.get(this._productUrl) 
      .map((response: Response) => <IProduct[]> response.json()) 
      .do(data => console.log('All inside observable: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
     console.log('_observable inside 2: ' + (this._observable)); 
    } 

    console.log('_observable after: ' + (this._observable)); 
    return this._observable; 
} 

diese Linie nie, wenn this._observable underfined ist this._observable=this._http.get(this._productUrl)

ABER ES NENNT aufgerufen werden soll !!! !

In einer Chromkonsole:

_observable before: [object Object] 
product.service.ts:25 _observable after: [object Object] 
product.service.ts:20 All inside observable:... 

Letzte Zeile erscheinen soll nicht!

Answer 1

Um zu vermeiden, Datei geladen Sie müssen innen Codezeilen umfassen, wenn Aussagen:

  .publishReplay(1) 
      .refCount() 

Der vollständige Code hier geht:

getProducts(): Observable<IProduct[]> { 
    console.log('_observable before: ' + (this._observable)); 
    if(this._observable===undefined){ 
     console.log('_observable inside 1: ' + (this._observable)); 
     this._observable=this._http.get(this._productUrl) 
      .map((response: Response) => <IProduct[]> response.json()) 
      .publishReplay(1) 
      .refCount() 
      .do(data => console.log('All inside observable: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
     console.log('_observable inside 2: ' + (this._observable)); 
    } 

    console.log('_observable after: ' + (this._observable)); 
    return this._observable; 
} 

Answer 2

_observable vorher ist ein Objekt im Protokoll. Und "letzte Zeile" Kommentar ist außerhalb Wenn-sonst. Warum nicht versuchen:

if (!Object.keys(this._observable).length) { 
    console.log('_observable inside 1: ' + (this._observable)); 
    this._observable=this._http.get(this._productUrl) 
     .map((response: Response) => <IProduct[]> response.json()) 
     .do(data => console.log('All inside observable: ' + JSON.stringify(data))) 
     .catch(this.handleError); 
     console.log('_observable inside 2: ' + (this._observable)); 
     return this._observable; 
    } else { 
     console.log('_observable after: ' + (this._observable)); 
     return this._observable; 
    } 

Answer 3

Für Ihren Code

getProducts(): Observable<IProduct[]> { 
return this._http.get(this._productUrl) 
    .map((response: Response) => <IProduct[]> response.json()) 
    .publishReplay(1) 
    .refCount() 
    .do(data => console.log('All: ' + JSON.stringify(data))) 
    .catch(this.handleError); 
} 

Jetzt brauchen Sie nicht über diese Bedingungen zu denken. publishReplay, refCount teilt den gleichen Status unter allen Beobachtern. PublishReplay hilft Ihnen dabei, Daten zwischenzuspeichern, und refCount hilft, den Beobachter verfügbar zu machen.