Réutiliser l'objet renvoyé à partir de la réponse HTTP sans effectuer d'autre appel d'API dans Angular 4

Question

J'utilise promettre de récupérer un objet User-Details dans une application Angular 4 en utilisant Typescript. Maintenant, j'utilise une partie de cet objet à deux endroits différents dans mon application en utilisant la simple demande get. Quelque chose comme ceci:

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

Alors, comment récupérer et prenom email en utilisant leurs fonctions getter après la promesse est résolu? Je comprends que je peux réutiliser deux fois la même demande get() mais je ne veux pas faire un appel api inutile. Je souhaite récupérer ces valeurs plusieurs fois et effectuer un seul appel d'API.

Merci

Answer 1

Au rxjs 5.4.0 vous pouvez utiliser shareReplay (https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/sharereplay.md)

Vous stocker essentiellement la séquence et le retour observable lorsque les composants souscrivent.

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

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

maintenant lorsqu'un composant souscrit à cela, il partagera la même demande api (peu importe si les appels se produisent simultanément ou plus tard se produire). Voici un plnkr de travail (https://plnkr.co/edit/drngeofZsXuG9LfJkFob?p=preview) regardez les journaux de la console pour voir le travail shareReplay.

---

En prenant cela un peu plus loin, vous pouvez implémenter un moyen d'effacer le shareReplay. Par exemple, si un utilisateur se déconnecte, vous devez effacer les données de l'utilisateur.

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

Désormais, lorsqu'un utilisateur se déconnecte, vous pouvez appeler clearUserCache() et quand quelque chose est abonnée à getUserDetail(), une autre requête HTTP est lancée.

Answer 2

Vous pouvez vérifier si _firstName et _email existent déjà. Si c'est le cas, renvoyez-les simplement et n'appelez pas votre serveur. De cette façon, vous pouvez toujours utiliser la méthode userDetail pour obtenir vos données.

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