如何在Observable链中提取含内部Observable的对象完整值？

这个场景在RxJS开发里挺常见的——当你有一个Observable发出的对象里，某个属性本身又是Observable，想要展开这个内部Observable的同时，保留原对象的其他属性。你之前用flatMap（现在RxJS更推荐用switchMap）只拿到了内部Observable的值、丢失父对象属性的问题，其实可以通过switchMap的第二个投影参数完美解决。

针对你给出的示例：

let obs = of({ prop1: 'foo', prop2: of('bar') });

想要得到{ prop1: "foo", prop2: "bar" }，可以用下面的写法：

of({ prop1: 'foo', prop2: of('bar') }).pipe(
  switchMap(
    val => val.prop2, // 第一个参数：指定要订阅的内部Observable
    (originalObj, innerValue) => ({ // 第二个参数：投影函数，同时拿到原始对象和内部值
      prop1: originalObj.prop1,
      prop2: innerValue
    })
  )
).subscribe(console.log);

为什么这个写法管用？ #

switchMap的第二个参数是一个可选的投影函数，它会接收两个关键参数：

• 第一个是源Observable发出的原始对象（这里就是{ prop1: 'foo', prop2: of('bar') }）
• 第二个是内部Observable发出的值（这里就是'bar'）
  我们可以在这个函数里把两者的属性组合起来，返回需要的最终对象，这样就既拿到了内部Observable的值，又保留了原对象的其他属性。

扩展：多个内部Observable的情况 #

如果你的对象里有多个属性都是Observable，比如：

let obs = of({ prop1: 'foo', prop2: of('bar'), prop3: of('baz') });

可以用forkJoin合并多个内部Observable，再通过投影函数组合结果：

of({ prop1: 'foo', prop2: of('bar'), prop3: of('baz') }).pipe(
  switchMap(
    val => forkJoin([val.prop2, val.prop3]), // 合并多个内部Observable
    (originalObj, [innerVal2, innerVal3]) => ({
      prop1: originalObj.prop1,
      prop2: innerVal2,
      prop3: innerVal3
    })
  )
).subscribe(console.log);

这样不管是单个还是多个内部Observable，都能轻松实现“保留原属性+展开内部Observable”的需求啦。

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