RXJS-3个并行可观察变量,然后发出值,并使用它来依次调用3个可观察变量

时间:2018-12-28 11:00:21

标签: angular rxjs

已关闭

也许我的问题有点复杂,但是我不知道如何实现自己想要的东西。

上下文
三个并行可观察变量发出值,然后,当我拥有所有三个值时,我对其稍加修改,然后将其称为串联的三个可观察变量。 如下图所示: enter image description here

现在?
目前,我设法通过将我的三个平行可观察对象放入 zip 运算符中,然后对其进行订阅,修改值,并在完成时调用另一个订阅,并在完成时进行操作。三倍!     

this.service.Function(id) //return zip(Ob1, Ob2, Ob3)
  .subscribe(
    ([val1, val2, val3]) => {
      /*DO SOMETHING*/
      this.tmp1 = val1;
      this.tmp2 = val2;
      this.tmp3 = val3;
    },
    () => {}, //on error
    () => { //on complete
      let newV1, newV2, newV3 = [];
      [newV1, newV2, newV3 ] = [
        this.tmp1.map(x => x.id2),
        this.tmp2.map(x => x.id2),
        this.tmp3.map(x => x.id2)
      ];
      this.service.Function2(newV1)
        .subscribe(res => {
            //DO SOMETHING
          },
          () => {},
          () => { //on complete
            this.service.Function2(newV2)
              .subscribe(res => {
                  //DO SOMETHING
                },
                () => {},
                () => { //on complete
                  this.service.Function2(newV3)
                    .subscribe(res => {
                        //DO SOMETHING
                      },
                      () => {},
                      () => {
                        //DO SOMETHING
                      });
                });
          });
    }
  );

我尝试过的事情
我用 switchMap concat 尝试了不同的方法,但是concat并没有将我的值返回为Array ...

this.kycService.getDocuments(idNotif).pipe(
  switchMap(([val1, val2, val3]) => {
    this.tmp1 = val1;
    this.tmp2 = val2;
    this.tmp3 = val3;

    let newV1, newV2, newV3 = [];
      [newV1, newV2, newV3 ] = [
        this.tmp1.map(x => x.id2),
        this.tmp2.map(x => x.id2),
        this.tmp3.map(x => x.id2)
      ];
    return concat(this.service.Function2(newV1),this.service.Function2(newV2), this.service.Function2(newV3))
  }))
  .subscribe(([Ob_newV1, Ob_newV2, Ob_newV3]) => {
    //DO SOMETHING
    //[Ob_newV1, Ob_newV2, Ob_newV3] Doesn't work, I need to do val => {}
  })
);

如果您对使用什么有任何建议,我会对RXJS中的所有运算符/功能感到困惑。

提前谢谢

我的解决方案

    this.kycService.getDocuments(idNotif).pipe(
  switchMap(([val1, val2, val3]) => {
    this.tmp1 = val1;
    this.tmp2 = val2;
    this.tmp3 = val3;

    let newV1, newV2, newV3 = [];
      [newV1, newV2, newV3 ] = [
        this.tmp1.map(x => x.id2),
        this.tmp2.map(x => x.id2),
        this.tmp3.map(x => x.id2)
      ];
    return concat(this.service.Function2(newV1),this.service.Function2(newV2), this.service.Function2(newV3))
  }))
  .subscribe((val) => {
    //DO SOMETHING
    //val is emitted every time my function2 complete, so I manage to deal with this and rearrange my data
  })
);

1 个答案:

答案 0 :(得分:0)

取决于您的可观察类型。

对于热门可观察物(主题,商店等),您将使用combineLatest

对于冷的可观察对象(例如HTTP调用,promise等),您将使用forkJoin

让我们假设他们很冷。

forkJoin(
  first$.pipe(
    map(result => /* transformation of your first observable */),
    switchMap(result => this.myService.getNextObservableFromFirst())
  ),
  second$.pipe(
    map(result => /* transformation of your second observable */),
    switchMap(result => this.myService.getNextObservableFromSecond())
  ),
  third$.pipe(
    map(result => /* transformation of your third observable */),
    switchMap(result => this.myService.getNextObservableFromThird())
  ),

).subscribe([r1, r2, r3] => /* What to do once all calls are completed */);

似乎适合您的情况,它会给

forkJoin(
  first$.pipe(
    map(result => result.id2),
    switchMap(result => this.myService.Function2(result))
  ),
  second$.pipe(
    map(result => result.id2),
    switchMap(result => this.myService.Function2(result))
  ),
  third$.pipe(
    map(result => result.id2),
    switchMap(result => this.myService.Function2(result))
  ),

).subscribe([r1, r2, r3] => /* DO SOMETHING */);