RxJS：如何实现每个Observable完成时发射对应结果数组？

要实现每当任意一个Observable完成（发射值）时就输出包含当前已完成结果、未完成项为null的数组，你可以按以下方式修改代码：

1. 给每个目标Observable添加startWith(null)操作符，让它们在正式发射结果前先输出一个null作为初始占位值
2. 用combineLatest组合处理后的Observable，此时每当任意一个Observable发射新值（包括完成时的最终结果），都会触发订阅回调，返回包含所有Observable最新状态的数组——已完成的位置是对应结果，未完成的位置保持null

示例代码 #

import { combineLatest, startWith, filter } from 'rxjs';

ngOnInit() {
  // 给每个Observable添加初始null占位
  const processedObs1 = obs1.pipe(startWith(null));
  const processedObs2 = obs2.pipe(startWith(null));
  const processedObs3 = obs3.pipe(startWith(null));

  combineLatest([processedObs1, processedObs2, processedObs3])
    // 可选：过滤掉初始全null的触发（如果不需要这次回调的话）
    .pipe(filter(values => values.some(val => val !== null)))
    .subscribe(([obs1Res, obs2Res, obs3Res]) => {
      // 这里会按顺序收到：
      // [null, 2, null]（obs2完成后）
      // [1, 2, null]（obs1完成后）
      // [1, 2, 3]（obs3完成后）

      // 按需求用??=赋值变量
      this.firstValue ??= obs1Res;
      this.secondValue ??= obs2Res;
      this.thirdValue ??= obs3Res;

      // 执行动态渲染页面的逻辑
    });
}

原理说明 #

• startWith(null)确保每个Observable在一开始就有一个发射值，让combineLatest可以在第一个Observable完成时就触发回调，而不是等待所有Observable都发射过一次
• combineLatest会持续监听所有Observable的最新值，每当任意一个Observable发射新值，就会把所有Observable的最新值组合成数组发射出去
• 可选的filter操作符可以去掉初始的全null数组发射，只保留至少有一个有效结果的回调触发

内容的提问来源于stack exchange，提问作者N. St