forkJoin 完成后如何調用另一個 HTTP 請求（RxJS）？

Question

我已經看了很長時間，但我真的沒有弄清楚如何“正確”地做到這一點。 所有其他答案要么被棄用，要么以相反的順序執行。

我想做的是，我想並行發送一堆 HTTP 請求，因此是 forkJoin。 然后只有當它們完成時，我想調用另一個 HTTP 請求（現在在 submitOrder() 中）。

然后在某個時候，如果第一個 HTTP 請求成功，我想再次將我的對象標記為不臟。

這段代碼有效，但我明白這真的不是“正確”的做法，因為它在訂閱內部調用訂閱。

那么，真正的 RxJs 方式是什么？

forkJoin(obsArray).subscribe(res => {
            console.log('All were resolved');
            this.products.forEach(element => {
                this.isNotDirtyAnymore();
            });
            this.submitOrder();
        });


submitOrder() {
        this.service.submitOrder(this.id).subscribe(response => {
            console.log('Order was submitted');
        }, error => {
            console.log(error);
        });
    }

Answer 1

這是我上面評論的一個例子（未經測試）：

   forkJoin([
        this.service.callItem1,
        this.service.callItem2
    ]).pipe(
        tap(([resp1, resp2]: [any, any])=> {
            this.products.forEach(element => {
                this.isNotDirtyAnymore();
            });
        }),
        switchMap(([resp1, resp2]: [any, any]) => this.service.submitOrder(this.id))
    ).subscribe(response => {
        // if you don't need to do this in the tap above you can do it here
        this.products.forEach(element => {
            this.isNotDirtyAnymore();
        });
        console.log('Order was submitted');
    }, error => {
        console.log(error);
    });

Answer 2

如果您不需要來自forkJoin的結果，您可以這樣做：

concat(
  forkJoin(obsArray),
  this.service.submitOrder(this.id)
).subscribe({
  complete: () => { // This will be triggered only when `concat` completes which means both source Observables complete (won't emit error).
    this.products.forEach(element => {
      this.isNotDirtyAnymore();
    });
  },
})

確保import { concat } from 'rxjs'; 而不是來自rxjs/operators 。

Answer 3

由於forkJoin實際上返回了一個新的 observable，你可以把 is 當作一個普通的 observable。 然后可以使用普通的高階運算符，switchMap，contactMap...並將副作用放入tap。 例如：

forkJoin(obsArray).pipe(
  tap(() => {
    console.log('All were resolved');
    this.products.forEach(element => this.isNotDirtyAnymore()),
  }),
  switchMap(() => submitOrder()),
});

Answer 4

您可以使用 pipe 運算符。

來自http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html的示例：

import { map, filter, scan } from 'rxjs/operators';

Rx.Observable.interval(1000)
  .pipe(
     filter(x => x % 2 === 0),
     map(x => x + x),
     scan((acc, x) => acc + x)
   ).subscribe(x => console.log(x))