如何合并两个RxJS Observable？附示例代码寻求解决方案

嘿，刚学RxJS的时候确实会对这些组合操作符有点摸不着头脑，我来帮你搞定合并这两个Observable的问题～

首先看你的两个数据源：一个是图片信息的Observable，一个是用户列表的Observable，它们是完全独立的，我们可以用RxJS的组合操作符来把它们合并到一起，不同的操作符对应不同的业务场景，我给你列几个常用的：

1. 按顺序一一配对：zip操作符 #

如果你的需求是把两个Observable里相同位置的元素一一对应（比如第一个图片对应第一个用户，第二个图片对应第二个用户），那zip绝对是首选，它会等两个流都发出第n个元素时，才会把这两个元素传给你定义的合并函数。

示例代码：

var obs = Rx.Observable.from([ 
  { id: "1", url: "whatever.jpg"}, 
  { id: "2", url: "whatever2.jpg"}, 
  { id: "3", url: "whatever3.jpg"} 
]);
var list = Rx.Observable.from([ 
  { first: "Gary", last: "Simon", age: "34"}, 
  { first: "Jane", last: "Simon", age: "34"}, 
  { first: "Juan", last: "Simon", age: "34"} 
]);

// 使用zip按位置配对元素，自定义合并后的结构
var newObs = Rx.Observable.zip(obs, list, (imageItem, userItem) => {
  return {
    userFullName: `${userItem.first} ${userItem.last}`,
    userAge: userItem.age,
    profileImageId: imageItem.id,
    profileImageUrl: imageItem.url
  };
});

// 订阅查看合并结果
newObs.subscribe(combinedResult => {
  console.log("合并后的结果：", combinedResult);
});

注意：如果其中一个Observable的元素数量比另一个多，多出来的元素会被忽略哦，比如obs有4个元素，list只有3个，那第4个图片元素不会被合并。

2. 实时结合最新值：combineLatest操作符 #

如果你的需求是只要其中一个Observable发出新值，就用这个新值和另一个Observable的最新值组合，那combineLatest更适合，比如当用户列表更新时，自动和当前最新的图片信息组合。

示例代码：

var combinedObs = Rx.Observable.combineLatest(obs, list, (imageItem, userItem) => {
  return {
    imageUrl: imageItem.url,
    userName: userItem.first,
    userAge: userItem.age
  };
});

combinedObs.subscribe(result => {
  console.log("实时组合结果：", result);
});

提示：这个操作符会先等两个Observable都至少发出一个值，之后才会开始组合。比如如果obs先发出所有3个图片，然后list才发出用户，那么每个用户都会和obs的最后一个图片元素组合。

3. 等待所有异步操作完成：forkJoin操作符 #

如果你的两个Observable是异步请求（比如API调用），需要等两个请求都完成后再合并结果，那forkJoin就很合适，它会收集每个Observable的最后一个值，等所有流都完成后一次性返回。

示例代码（模拟异步场景）：

// 模拟1秒后返回的图片请求
var asyncImageObs = Rx.Observable.timer(1000).mapTo({ id: "1", url: "async-profile.jpg" });
// 模拟1.5秒后返回的用户请求
var asyncUserObs = Rx.Observable.timer(1500).mapTo({ first: "Gary", last: "Simon", age: "34" });

var joinedObs = Rx.Observable.forkJoin(asyncImageObs, asyncUserObs, (image, user) => {
  // 合并两个异步结果
  return { ...user, profileImage: image.url };
});

joinedObs.subscribe(finalResult => {
  console.log("异步合并结果：", finalResult);
});

总结一下怎么选 #

• 元素需要按顺序一一对应 → 用zip
• 需要实时结合两个流的最新状态 → 用combineLatest
• 等待多个异步操作全部完成再处理 → 用forkJoin

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