将 Observable 的 RxJs Observable 转换为待处理的 Observable 的计数？

Question

我正在制作一项服务，该服务具有多种触发 HTTP 调用的方法。我想向客户显示一个 Observable，告诉他们是否有任何待处理的调用。

我认为这种方法通常会奏效，但感觉很老套，不太像 RxJs。我搜索了整个 StackOverflow 和 RxJs 文档，但找不到更好的方法。有什么建议吗？谢谢！

let pendingCountSubject = new BehaviorSubject<number>(0);
let pendingCount$ = pendingCountSubject.asObservable();

let pendingSubject = new Subject<Observable<any>>();
pendingSubject.pipe(
  finalize(() => {
    pendingCountSubject.next(pendingCountSubject.value - 1);
  }))
  .subscribe();

function trackPendingObservable(obs) {
  pendingCountSubject.next(pendingCountSubject.value + 1);
  pendingSubject.next(obs);
}

trackPendingObservable(httpCall1);
trackPendingObservable(httpCall2);
trackPendingObservable(httpCall3);

在模板中：

Pending calls: {{ pendingCount$ | async }}

Answer 1

如果我没记错的话，你的服务有几种方法可以执行 http 调用，例如

httpCall1(): Observable<any> { // do stuff}
httpCall2(): Observable<any> { // do stuff}

httpCallN(): Observable<any> { // do stuff}

这些方法以某种方式并行运行，可能是因为它们以快速同步顺序调用。

您想要显示的是在某个时刻它们中有多少处于“飞行状态”。

这样的事情可能会奏效。

该服务公开了 http 调用方法以及当前“正在运行”的调用的计数器。

export class MyHttpService {

  constructor(private http: HttpClient)

  public callsOnFly = 0;

  httpGenericCall(httpCall: Observable<any>) {
     this.callsOnFly++;
     return httpCall
         .pipe(
            finalize(() => this.callsOnFly--)
         )
  }

  httpCall1() {
     return this.httpGenericCall(this.http.get('http://my-server1'));
  }

  httpCall12() {
     return this.httpGenericCall(this.http.get('http://my-server2'));
  }

  httpCallN() {
     return this.httpGenericCall(this.http.get('http://my-serverN'));
  }

}

组件可以通过插值来显示计数器的值

Pending calls: {{ httpService.callsOnFly }}

我假设组件中MyHttpService 的名称是httpService