如何实现仅调用一次接口、支持前后订阅的Angular Observable？

我需要一个Observable，它会精确调用一次接口，并将结果返回给所有订阅者——不管订阅操作是在接口调用前还是之后进行。

我试过的几种方式都有问题： #

1. Subject无法覆盖事后订阅的情况 #

Subject只能给接口调用前订阅的客户端返回结果，事后订阅的拿不到数据：

const s: Subject<number> = new Subject();
s.next(1);
s.subscribe(x => {console.log(x)}); // 不会输出任何内容

2. BehaviorSubject会返回虚拟初始值 #

BehaviorSubject必须设置初始值，接口调用前订阅的客户端会先收到这个虚拟值，而非接口返回的正确结果：

const s: BehaviorSubject<number> = new BehaviorSubject(123);
s.subscribe(x => {console.log(x)}); // 先输出虚拟值123，再输出1
s.next(1);

3. 自定义Observable可能导致接口多次调用 #

这种写法存在竞态问题，多个订阅者可能触发多次接口请求：

let val: number|undefined = undefined;
const s = new Observable((observer) => {
  if (val !== undefined) {
    observer.next(val);
  } else {
    doMyHttpCall().subscribe({
      next: (response) => {
        val = response;
        observer.next(val);
      }
    });
  }
});
s.subscribe(x => {console.log(x)});
s.subscribe(x => {console.log(x)});   // 两个订阅者可能触发两次接口调用

这里有两种常用且可靠的方案：

方案1：使用ReplaySubject(1) #

ReplaySubject可以缓存指定数量的历史值，设置为1就能让事后订阅的订阅者拿到之前的接口结果，且不需要初始值。搭配take(1)确保接口只调用一次：

import { ReplaySubject, take } from 'rxjs';

// 创建一个缓存1个值的ReplaySubject
const dataSubject = new ReplaySubject<number>(1);
// 发起接口请求，take(1)确保请求完成后自动取消订阅
doMyHttpCall().pipe(take(1)).subscribe(dataSubject);

// 不管在接口调用前后订阅，都能拿到结果
dataSubject.subscribe(x => console.log(x));
// 延迟订阅也能获取到缓存的结果
setTimeout(() => {
  dataSubject.subscribe(x => console.log('延迟订阅:', x));
}, 2000);

方案2：使用shareReplay(1)操作符（推荐） #

这是最简洁的实现方式，直接在接口Observable上使用shareReplay(1)，它内部会自动用ReplaySubject缓存结果，同时保证源Observable只被订阅一次：

import { shareReplay } from 'rxjs/operators';

// 创建共享的Observable，仅调用一次接口，缓存1个结果
const sharedData$ = doMyHttpCall().pipe(shareReplay(1));

// 第一次订阅触发接口调用
sharedData$.subscribe(x => console.log(x));
// 后续订阅直接读取缓存，不会再次调用接口
sharedData$.subscribe(x => console.log('第二次订阅:', x));
// 延迟订阅同样能拿到结果
setTimeout(() => {
  sharedData$.subscribe(x => console.log('延迟订阅:', x));
}, 2000);

内容的提问来源于stack exchange，提问作者luca.vercelli