Question

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

现在，我使用简单的get请求在我的应用程序中的两个不同位置使用该对象的一部分。像这样：

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

那么，如何在解析承诺后使用其getter函数检索firstName和email？

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

由于

Answer 1

您可以检查_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);
  }

Answer 2

从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请求。

重用HTTP响应返回的对象，而不在Angular 4中进行另一个API调用

2 个答案: