重复使用从HTTP响应返回的对象，而无需在Angular 4中进行另一个API调用

Question

我正在使用promise来检索使用Typescript的Angular 4应用程序中的User-Details对象。

现在，我使用简单的获取请求在我的应用程序的两个不同位置使用该对象的一部分。事情是这样的：

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

那么，如何检索firstName和使用他们的getter函数的电子邮件承诺解决后？

我明白，我可以重复使用相同的get（）请求两次，但我不想进行不必要的api调用。我想要多次检索这些值并进行单个API调用。

感谢

Answer 1

由于rxjs的5.4.0可以使用shareReplay（https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/sharereplay.md）

你基本上存储观察到的序列，并将其返回时组件订阅。

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

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

现在当组件预订这一点，将共享相同的API请求（不管呼叫同时发生或以后发生）。这里是一个工作plnkr（https://plnkr.co/edit/drngeofZsXuG9LfJkFob?p=preview）看看控制台日志，看看shareReplay的工作。

---

更进一步，您可以实施一种方法来清除shareReplay。例如，如果用户注销，则需要清除用户数据。

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

现在，当用户注销时，你可以调用clearUserCache（）和当事情订阅getUserDetail（），另一个HTTP请求将被启动。

Answer 2

您可以检查是否_firstName和_email已经存在。如果是这样，只要返回它们，不要打电话给你的服务器。通过这种方式，您始终可以使用userDetail方法获取您的数据。

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