如何合并发射不同数量值的observables，实现单次订阅分别存储结果

问题根因 #

你用zip操作符遇到的短板问题是zip的固有特性：它严格按照索引配对两个Observable的发射值，必须等两个Observable都发出第n个值才会触发一次next，任意一个Observable完成后zip就会直接结束，自然会丢失更长的那个Observable后续的所有值。

方案1：需实时接收发射值（边查询边处理数据） #

用merge操作符合并两个打了来源标记的Observable，收到值后按来源分别存入对应数组即可。merge会等所有传入的Observable都完成后才触发整体的complete回调，不会丢失任何值：

import { merge } from 'rxjs';
import { map } from 'rxjs/operators';

let firstArray = [];
let secondArray = [];

// 给每个Observable的发射值打上来源标记
const taggedFirst = firstObservable.pipe(
  map(val => ({ source: 'first', data: val }))
);
const taggedSecond = secondObservable.pipe(
  map(val => ({ source: 'second', data: val }))
);

const subscription = merge(taggedFirst, taggedSecond).subscribe({
  next(item) {
    item.source === 'first' 
      ? firstArray.push(item.data) 
      : secondArray.push(item.data);
  },
  error(err) {
    console.log(err);
  },
  complete() {
    console.log('第一个数组：', firstArray);
    console.log('第二个数组：', secondArray);
  }
});

方案2：仅需等两个查询全部完成后拿完整数组（更推荐，无外部变量） #

如果你的数据库查询是完成后才需要拿到全部结果，用toArray + forkJoin的组合写法更简洁，不需要手动维护外部数组：

import { forkJoin } from 'rxjs';
import { toArray } from 'rxjs/operators';

const subscription = forkJoin({
  // toArray会收集当前Observable发射的所有值，完成时返回完整数组
  firstArray: firstObservable.pipe(toArray()),
  secondArray: secondObservable.pipe(toArray())
}).subscribe({
  next(res) {
    console.log('第一个数组：', res.firstArray);
    console.log('第二个数组：', res.secondArray);
  },
  error(err) {
    console.log(err);
  }
});

forkJoin会等所有传入的Observable都完成后，统一返回每个Observable的最终结果，完全适配你的需求。

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