Question

我有一个后端服务，该服务返回我在多个Angular组件上所需的用户详细信息。我的问题是，它显然被多次调用。这是我的获取请求：

getUser(): Observable<User> {
  if (this.user) {
    return Observable.of(this.user);
  } else {
    return this.http
      .get<User>(BACKENDPATH)
      .map((user: User) => new User().deserialise(user))
      .do((user) => {
        this.user = user;
        console.log(this.user.getUserName());
        return this.user;
      });
   }
}

在获得函数的一部分后，我尝试了以下方法，但没有一个起作用：

.publishReplay（1）.refCount（）
.shareReplay（）
.shareReplay（1）

这些方法在网上也可以使用，因此我猜我在实现这些方法时做错了什么，但我不知道该怎么办。

Answer 1

您每次调用getUser()都会创建一个新的流。
解决方案：发出一个Http请求并处理缓存/存储的数据。使用以下方法

export class SharedService {

    data$: Observable<User>;
    getUser(): void {

        this.data$ = this.http
            .get<User>(BACKENDPATH)
            .map((user: User) => new User().deserialise(user))
            .do((user) => {
                this.user = user;
                console.log(this.user.getUserName());
                return this.user;
            }).shareReplay(1);
    }

    getData(): Observable<User> {
        return this.data$;
    }
}

组件：

this.service.getData().sub(...)

Answer 2

Vikas帮助解决了这个问题。现在这是我的代码：

userData: Observable<User> = this.http
  .get<User>(BACKENDPATH)
  .map((user: User) => new User().deserialise(user))
  .shareReplay(1);

getUser(): Observable<User> {
  return this.userData;
}

如何确保HTTP请求仅被调用一次？

2 个答案: