Angular RxJS HTTP请求仅调用一次的实现问题排查

你的问题根源在于：当多个组件同时调用getCurrentUser()时，_user还未被赋值，每个调用都会新建一个this.userProvider.getUser()的Observable实例——你用的share()只能让单个Observable的多个订阅者共享请求，但每次进入else分支都会生成新的Observable，所以根本起不到复用请求的作用。后面加的exhaustMap完全没用到正确场景，自然解决不了问题。

要实现仅调用一次HTTP接口的需求，核心是缓存请求的Observable实例，而不是只缓存返回的User对象。下面是两种可行的实现方式：

方式一：手动缓存Observable #

export class UserService {
  private _user: User;
  private _userRequest$: Observable<User>;

  getCurrentUser(): Observable<User> {
    // 已缓存用户数据，直接返回副本
    if (this._user) {
      return of({ ...this._user });
    }

    // 请求Observable已存在，直接复用
    if (this._userRequest$) {
      return this._userRequest$;
    }

    // 首次请求：创建并缓存Observable
    this._userRequest$ = this.userProvider.getUser().pipe(
      tap(usr => {
        this._user = usr;
        // 可选：请求完成后清空缓存的Observable，支持登出后重新获取
        // this._userRequest$ = null;
      }),
      catchError(err => {
        // 请求失败时清空缓存，避免后续订阅一直收到错误
        this._userRequest$ = null;
        throw err;
      })
    );

    return this._userRequest$;
  }
}

方式二：使用shareReplay操作符 #

这种写法更简洁，shareReplay(1)会自动缓存请求结果并共享订阅：

export class UserService {
  private _user$: Observable<User>;

  getCurrentUser(): Observable<User> {
    if (!this._user$) {
      this._user$ = this.userProvider.getUser().pipe(
        shareReplay(1),
        catchError(err => {
          // 出错后清空缓存，确保下次调用能重新发起请求
          this._user$ = null;
          throw err;
        })
      );
    }
    return this._user$;
  }
}

两种方式的核心逻辑一致：第一次调用时发起请求并缓存Observable实例，后续所有调用直接复用这个实例，从而保证HTTP请求只会触发一次。

内容的提问来源于stack exchange，提问作者gbb