Angular中如何用RxJS concat实现Observable顺序执行及单一成败日志

问题背景 #

在Angular组件中定义了两个Observable：getData1$ 和 getData2$，需实现以下需求：

• 按顺序执行两个Observable；
• 第一个执行失败则终止流程，不执行第二个；
• 任一Observable失败时，输出一条错误日志；
• 两者都成功时，输出一条成功日志。

当前实现的痛点：
使用concat操作符可满足前两个需求，且错误通知只会触发一次（符合需求3），但需求4的实现存在问题：若用next回调会因每个Observable完成都触发而多次输出成功日志；若用complete回调处理成功，又担心不符合常规用法，存在代码异味。

最优实现方案 #

借助concat结合ignoreElements操作符即可完美解决所有需求，具体思路：

1. concat保证Observable按顺序执行，且第一个失败时直接终止，不执行后续Observable；
2. ignoreElements操作符会忽略所有next通知，仅传递error和complete终止事件，这样订阅时只会收到一次complete（两个都成功）或一次error（任一失败）；
3. 在订阅的error和complete回调中分别处理错误日志和成功日志，完全符合RxJS语义，无代码异味。

完整代码示例 #

import { concat, ignoreElements } from 'rxjs';

@Component({
  // 组件元数据
})
export class YourComponent {
  getData1$ = this.myService.getData1();
  getData2$ = this.myService.getData2();

  constructor(private myService: MyService) {
    this.getAllData();
  }

  getAllData() {
    concat(this.getData1$, this.getData2$)
      .pipe(
        ignoreElements(), // 忽略所有next事件，仅保留终止通知
        // 若需无论成功失败都执行的逻辑，可保留finalize
        // finalize(() => console.log('流程已结束'))
      )
      .subscribe({
        error: () => console.log('one or more data fetches have had an error'),
        complete: () => console.log('all data fetches have succeeded')
      });
  }
}

方案说明 #

• ignoreElements是RxJS官方提供的标准操作符，专门用于忽略next事件，聚焦终止状态的处理，完全适配此类需要统一判断最终执行结果的场景；
• 该写法既满足所有需求，又符合RxJS的设计语义，不存在代码异味；
• 若需要添加无论成功失败都执行的收尾逻辑，可继续保留finalize操作符。

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