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

时间:2018-07-06 09:44:16

标签: angular http rxjs

我有一个后端服务,该服务返回我在多个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)

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

2 个答案:

答案 0 :(得分:3)

您每次调用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(...)

答案 1 :(得分:0)

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

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

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