javascript - 从 RXJS observable 获取中间数据的最佳方式

Question

我想调用第一个服务来查询一些数据(返回结果数组)，然后再次调用第二个服务以获取每个结果的更多数据。每个服务调用的结果应该合并并返回并显示在一个列表中。我想我明白那部分是如何工作的。

我不太确定的部分是要求能够在可用时立即显示第一次服务调用的结果。在数据可用之前，UI 应显示来自第二次服务调用的字段的加载指示器。

我唯一能想到的是在第一次服务调用和第二次服务调用之后添加“tap”rxjs 运算符，这会在新主题上发出事件并且 UI 可以收听 _documents$ 主题以在之后显示数据第一次调用，并在第二次调用后显示组合数据。

是否有处理这种情况的最佳做法？我是否缺少另一种模式或 rxjs 运算符可以使这更简单？

  _documents$: BehaviorSubject<DocumentSearchSomething[]> = new BehaviorSubject([]);
  private documentSearchQuery$ = new Subject<string>();

  constructor(private store: Store, private http: HttpClient) {

    this.documentSearchQuery$.pipe(
      switchMap((query) => {
        return this.http.get<any[]>(`https://my_api.com​/service_1?q=${encodeURIComponent(query)}`)
          .pipe(
            tap(service_1_results => this._documents$.next(service_1_results)),
            switchMap(service_1_results => {
              // make call to service 2 to get more data for each result, pass in id of every result
              return this.http.post<any[]>(`https://my_api.com/service_2`, {
                ids: service_1_results.map(r => r.id)
              }).pipe(
                map(service_2_results => {
                  // combine service_1_results with service_2_results
                  const combined = service_1_results.map(r1 => {
                    const r2 = service_2_results.find(c => c.id === r1.id);
                    return {...r1, ...r2};
                  });
                  return combined;
                }),
                tap(combined_results => this._documents$.next(combined_results))
              );
            })
          );
      }),
    ).subscribe();
  }

Answer 1

是的，您可以使用一个运算符来简化它。由于此管道设置了一个内部可观察对象(导致发出组合值)，您可以使用 startWith() 立即从内部可观察对象发出服务一的值。

    _documents$: Observable<DocumentSearchSomething[]>;
private documentSearchQuery = new Subject<string>();

constructor(private store: Store, private http: HttpClient) {

  this._documents$ = this.documentSearchQuery.pipe(
    switchMap(query => this.http.get<any[]>(`https://my_api.com​/service_1?q=${encodeURIComponent(query)}`)),
    switchMap(serviceOne => this.HTMLOutputElement.post<any[]>(`https://my_api.com/service_2`, {
      ids: serviceOne.map(r => r.id)
    }).pipe(
      map(serviceTwo => serviceOne.map(r1 => {
        const r2 = serviceTwo.find(c => c.id === r1.id);
        return { ...r1, ...r2 };
      })),
      startWith(serviceOne)
    ))
  );

}