如何将 ConcatMap 串在一起并跟踪数据

How to string together ConcatMaps and keep track of data

我有以下代码

   from(this.dataSource2.data.filter(a => a.ProcessAction == ProcessAction.Capture)).pipe(
      concatMap(x => {
//this calls my first endpoint which requires data which must wait until the last call is done before calling
        return this.stripeService.capturePaymentIntent(x.PaymentIntentId, Math.floor(x.AmountToCharge * 100));
      }),
//this calls the second endpoint which must execute after the first and requires data from the first
      concatMap(y => {
        return this.orderService.createCashFlow(cashFlowRequest)
      }),
    ).subscribe({
      next: (response) => {
        //The response data will have an order number so I can query the original data to alter it as I need
        this.dataSource2.data.filter(a => a.OrderData.OrderNumber == response.OrderNumber).forEach(original => {
          original.StripeData!.PreAuthAmount = 0;
          original.StripeData!.Status = 'succeeded';
          original.Message = '';}
          );
      },
      error: (err) => {
        //each of the endpoints throw different errors and I don't have access to the order number in one of them so can't query the ordignal query
        this.dataSource2.data.error = err;

      }

所以我的问题变成了如何从我在整个调用过程中创建的原始可观察对象传递原始数据。有没有更好的方法将我的 concatmap 串在一起或在 Angular 中调用顺序同步端点?

我有一个我需要调用的 url 列表,所以我从具有 from() 的那些创建 observables 然后我希望这些 URLs 中的每一个被异步调用所以我使用管道并在 observable 调用 concatMap 调用第一个端点。然后我根据第一个和 return 的响应再次调用 concatMap。然后我订阅了我的可观察对象,它只有最后一个端点的结果。

我是新手,所以非常感谢您的帮助!

编辑:为了清楚起见,我创建了我想在错误响应中更改的原始可观察对象 this.dataSource2.data

不要依赖 concatMap 来嵌套您的调用,而是使用 pipe 来确保服务方法的顺序调用和所有先前可观察值的可用性:

of(data)
  .pipe(
    switchMap((paymentId) =>
      capturePaymentIntent(paymentId).pipe(
        switchMap((intent) =>
          createCashFlow(intent).pipe(
            tap((cashFlow) => {
              console.log('Payment ID: ', paymentId);
              console.log('Payment Intent: ', intent);
              console.log('Cashflow: ', cashFlow);
            })
          )
        )
      )
    )
  )

Stackblitz:https://stackblitz.com/edit/rxjs-wlu4m1?devtoolsheight=60