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

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

那么，如何在 promise 解决后使用它们的 getter 函数检索 firstName 和 email？

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

谢谢

Answer 1

您可以检查 _firstName 和 _email 是否已经存在。如果是这样，就 return 他们，不要打电话给你的服务器。这样，您就可以随时使用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)

您基本上存储可观察序列，并在组件订阅它时return它。

// 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 中进行另一个 API 调用 4

Reuse the object returned from HTTP response without making another API call in Angular 4

angular-promise

angular2-http

angular