Verwenden Sie das von der HTTP-Antwort zurückgegebene Objekt erneut, ohne einen weiteren API-Aufruf in Angular 4

Question

durchzuführen. Ich verwende das Versprechen, ein User-Details-Objekt in einer Angular 4-App mit Typescript abzurufen.

Jetzt verwende ich einen Teil dieses Objekts an zwei verschiedenen Stellen in meiner Anwendung mit einfachen Get-Anfrage. Etwas wie folgt aus:

private _firstName: String; 
private _email: String; 

    get userDetail(): Promise<any> { 
    return this.http 
    .get(this._userDetailsURL) 
    .toPromise() 
    .then((response) => { 
    this._firstName = response.json().firstName; 
    this._email = response.json().email; 
    }) 
    .catch((err) => err); 
    } 

    get firstName(): String { 
    return _firstName; 
    } 

    get email(): String { 
    return _email; 
    } 

Also, wie Sie abrufen vorName und E-Mail ihre Getter Funktionen nach dem Versprechen gelöst ist?

Ich verstehe, dass ich die gleiche get() Anfrage zweimal wiederverwenden kann, aber ich möchte nicht einen unnötigen api Anruf machen. Ich möchte diese Werte mehrmals abrufen und einen einzelnen API-Aufruf durchführen.

Dank

Answer 1

Ab rxjs 5.4.0 Sie es shareReplay (https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/sharereplay.md)

Sie speichern grundsätzlich die beobachtbare Sequenz und das Rück verwenden können, wenn Komponenten zu abonnieren.

// service.ts 
observable$ = this.http 
    .get(this._userDetailsURL) 
    .map(res => res.json()) 
    .shareReplay(); 

getUserDetail(){ 
    return this.observable$ 
     .toPromise(); 
} 

jetzt, wenn eine Komponente dazu abonniert hat, wird es die gleiche api Anfrage (unabhängig davon, ob Anrufe später gleichzeitig oder passieren passieren) teilen. Hier ist ein funktionierender PLNKR (https://plnkr.co/edit/drngeofZsXuG9LfJkFob?p=preview) Blick auf die Konsolenprotokolle, um shareReplay arbeiten zu sehen.

---

Wenn Sie einen Schritt weiter gehen, können Sie eine Möglichkeit zum Löschen von shareReplay implementieren. Wenn sich ein Benutzer beispielsweise abmeldet, möchten Sie die Benutzerdaten löschen. Jetzt

// service.ts 
$observable; 

getUserDetail(){ 
    // if no observable sequence found, create sequence 
    if(!this.observable$){ 
     this.observable$ = this.http 
      .get(this._userDetailsURL) 
      .map(res => res.json()) 
      .shareReplay(); 
    } 

    return this.observable$ 
     .toPromise(); 
} 

clearUserCache(){ 
    this.observable$ = null; 
} 

, wenn sich ein Benutzer anmeldet, können Sie rufen clearUserCache() und wenn etwas getUserDetail abonniert() wird eine weitere HTTP-Anforderung eingeleitet werden.

Answer 2

können Sie überprüfen, ob _firstName und _email bereits vorhanden sind. Wenn ja, gib sie einfach zurück und rufe deinen Server nicht an. Auf diese Weise können Sie immer die Methode userDetail verwenden, um Ihre Daten zu erhalten.

private _firstName: String; 
private _email: String; 

    get userDetail(): Promise<any> { 
    if (this._firstName && this._email) { 
    return new Promise((resolve, reject) => { 
     resolve({firstName: this._firstName, email: this._email}) 
    }) 
    } 
    return this.http 
    .get(this._userDetailsURL) 
    .toPromise() 
    .then((response) => { 
    this._firstName = response.json().firstName; 
    this._email = response.json().email; 
    return {firstName: this._firstName, email: this._email} 
    }) 
    .catch((err) => err); 
    }