Angular 5中多个Observable调用链式处理问题

嘿，我懂你现在遇到的问题——在Angular 5里链式调用四个Observable，每一步都要用上前面的数据，最后还要拿到所有筛选后的结果，这可比两个调用的情况麻烦多了。不过别慌，咱们来一步步拆解解决。

你之前用flatMap（也就是现在RxJS里的mergeMap）时丢失前置数据，核心原因是每次flatMap默认只传递当前Observable的结果，没有把前面步骤的结果一起带过来。解决思路就是：在每一步把之前的结果和当前新获取的结果打包成一个对象，这样后续调用就能拿到所有需要的数据了。

下面是针对你需求的具体代码实现，我会逐段标注说明：

// 假设你的四个服务方法是这样定义的（对应你的CallOne到CallFour）
// callOne(): Observable<Foo[]>
// callTwo(foo: Foo): Observable<FooTwo[]>
// callThree(fooTwo: FooTwo): Observable<FooThree[]>
// callFour(foo: Foo, fooTwo: FooTwo, fooThree: FooThree): Observable<Bar[]>

this.callOne()
  .pipe(
    // 第一步：从CallOne返回的Foo数组里筛选出你需要的特定Foo
    // 这里用find找单个符合条件的，要是需要多个就换成filter
    map(foos => foos.find(foo => foo.id === 你的特定ID)),
    // 加个过滤确保筛选到了有效Foo，避免后续调用传空值
    filter(selectedFoo => !!selectedFoo),

    // 第二步：用筛选后的Foo调用CallTwo，同时保留selectedFoo
    mergeMap((selectedFoo) => 
      this.callTwo(selectedFoo).pipe(
        // 同样筛选出特定的FooTwo
        map(fooTwos => fooTwos.find(ft => ft.fooId === selectedFoo.id)),
        filter(selectedFooTwo => !!selectedFooTwo),
        // 把selectedFoo和selectedFooTwo打包成对象传递下去
        map(selectedFooTwo => ({ selectedFoo, selectedFooTwo }))
      )
    ),

    // 第三步：用FooTwo调用CallThree，同时保留前面的Foo和FooTwo
    mergeMap(({ selectedFoo, selectedFooTwo }) => 
      this.callThree(selectedFooTwo).pipe(
        map(fooThrees => fooThrees.find(ftt => ftt.fooTwoId === selectedFooTwo.id)),
        filter(selectedFooThree => !!selectedFooThree),
        // 打包三个结果
        map(selectedFooThree => ({ selectedFoo, selectedFooTwo, selectedFooThree }))
      )
    ),

    // 第四步：传入三个前置结果调用CallFour，最后整合所有数据
    mergeMap(({ selectedFoo, selectedFooTwo, selectedFooThree }) => 
      this.callFour(selectedFoo, selectedFooTwo, selectedFooThree).pipe(
        map(bars => bars.find(bar => bar.fooThreeId === selectedFooThree.id)),
        filter(selectedBar => !!selectedBar),
        // 最终把所有筛选后的结果打包成一个对象
        map(selectedBar => ({
          selectedFoo,
          selectedFooTwo,
          selectedFooThree,
          selectedBar
        }))
      )
    )
  )
  .subscribe(
    finalResult => {
      // 这里就能拿到所有你需要的结果啦！
      console.log('筛选后的Foo:', finalResult.selectedFoo);
      console.log('筛选后的FooTwo:', finalResult.selectedFooTwo);
      console.log('筛选后的FooThree:', finalResult.selectedFooThree);
      console.log('最终的Bar:', finalResult.selectedBar);
      // 在这里做你的业务逻辑处理就好
    },
    error => {
      // 别忘了处理调用过程中可能出现的错误
      console.error('链式调用出错:', error);
    }
  );

几个关键注意点： #

1. 打包传递数据：每一步用map把当前结果和之前的结果合并成对象，这样后续的mergeMap就能解构出所有需要的数据。
2. 空值过滤：每一步筛选后加filter确保拿到有效数据，避免后续调用因为空值报错。
3. RxJS版本兼容：Angular 5对应的是RxJS 5，flatMap和mergeMap是等价的，你用哪个都可以，不过后续版本里mergeMap是更推荐的名称。
4. 多结果筛选：如果你的“过滤特定”是指返回符合条件的数组（而不是单个对象），把代码里的find换成filter就行，后续处理数组的逻辑按需调整。

这样实现后，你就能在subscribe里拿到所有筛选后的Foo、FooTwo、FooThree和Bar了，完美满足你的需求～

内容的提问来源于stack exchange，提问作者Michael