如何首次调用时初始化由BehaviorSubject支撑的Observable？

我有一个由私有BehaviorSubject支撑的Observable，希望在首次触发时通过异步调用初始化该BehaviorSubject，但尚未找到合适的实现模式。据我了解，BehaviorSubject无法直接通过异步函数初始化。

目前我的实现代码如下：

protected _monkeyNames = new BehaviorSubject<Set<string>>(null);

MonkeyNames$: Observable<Set<string>> = this._monkeyNames.pipe(
  switchMap(async (nodes) => nodes ?? (await this.getMonkeyNames()))
);

protected async getMonkeyNames(): Promise<Set<string>> {
  const names = new Set(await this.stateService.getMonkeyNames());
  return names;
}

但该实现不会设置BehaviorSubject，只有后续调用setMonkeyNames时才会更新其值。如果在getMonkeyNames中调用.next()，Observable会再次触发，若names为null可能导致无限循环。

补充说明：这是一个服务类，无法使用ngOnInit()

解决方案 #

模式1：用defer+tap实现懒加载初始化 #

这种方式会在Observable首次被订阅时才触发异步请求，同时把结果存入BehaviorSubject做缓存，后续订阅直接取缓存值，不会重复请求：

protected _monkeyNames = new BehaviorSubject<Set<string>|null>(null);

MonkeyNames$: Observable<Set<string>> = defer(() => {
  // 如果已经有值，直接返回
  if (this._monkeyNames.value !== null) {
    return of(this._monkeyNames.value);
  }
  // 没有值就发起请求，拿到结果后更新BehaviorSubject
  return this.getMonkeyNames().pipe(
    tap(names => this._monkeyNames.next(names))
  );
}).pipe(
  // 过滤掉null值，确保订阅者只拿到有效数据
  filter(names => names !== null),
  // 类型断言，因为上面已经过滤了null
  map(names => names as Set<string>)
);

protected async getMonkeyNames(): Promise<Set<string>> {
  return new Set(await this.stateService.getMonkeyNames());
}

模式2：用ReplaySubject简化初始化逻辑 #

如果不需要BehaviorSubject的初始null值特性，可以换成ReplaySubject(1)——它会自动缓存最新的1个值，然后在服务构造函数里直接触发初始化：

protected _monkeyNames = new ReplaySubject<Set<string>>(1);

// 对外暴露只读Observable
MonkeyNames$: Observable<Set<string>> = this._monkeyNames.asObservable();

constructor(private stateService: StateService) {
  // 服务创建时就初始化
  this.initMonkeyNames();
}

private async initMonkeyNames(): Promise<void> {
  const names = new Set(await this.stateService.getMonkeyNames());
  this._monkeyNames.next(names);
}

这种方式逻辑更简洁，适合不需要初始默认值的场景，所有订阅者都会拿到初始化后的结果。

模式3：给BehaviorSubject加防重复触发逻辑 #

如果一定要保留BehaviorSubject的初始null值，可以在管道里加distinctUntilChanged防止无限循环，同时在初始化时更新Subject：

protected _monkeyNames = new BehaviorSubject<Set<string>|null>(null);

MonkeyNames$: Observable<Set<string>> = this._monkeyNames.pipe(
  switchMap(async (nodes) => {
    if (nodes !== null) return nodes;
    // 发起请求并更新Subject
    const names = await this.getMonkeyNames();
    this._monkeyNames.next(names);
    return names;
  }),
  // 自定义Set的比较逻辑，避免值没变化时重复触发
  distinctUntilChanged((a, b) => {
    if (a.size !== b.size) return false;
    for (const name of a) {
      if (!b.has(name)) return false;
    }
    return true;
  }),
  // 过滤null值
  filter(names => names !== null)
);

protected async getMonkeyNames(): Promise<Set<string>> {
  return new Set(await this.stateService.getMonkeyNames());
}

这里的distinctUntilChanged会对比前后两次的Set内容，只有真正变化时才会传递给订阅者，避免因为调用next()导致的重复处理。

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