如何将Observable数据存入另一个Observable？避免重复API请求

你的核心需求是复用同一份API返回的数据，同时生成两个可在combineLatest中使用的Observable，现有代码的问题主要在于操作符中副作用的不当使用，以及拼写错误，下面给你一套更合理的实现方案：

问题分析 #

1. 你在map操作符里直接给wantToAchieveObs$赋值属于副作用操作，这不符合RxJS的纯函数原则，而且如果原始Observable是冷Observable（比如真实API请求），后续订阅wantToAchieveObs$时会重复执行源Observable（也就是重复发请求）。
2. 代码里的_.firstname拼写错误，应该是_.firstName（注意大小写）。

可行实现方案 #

我们可以先把原始API Observable做共享订阅处理，确保无论后续有多少个订阅者，都只会执行一次源Observable（避免重复请求），然后基于共享后的Observable分别生成你需要的两个Observable：

// 1. 定义原始模拟API Observable，用shareReplay确保只执行一次，且缓存结果
const apiData$ = Observable.of({
  data: [
    { firstName: 'steve', lastName: 'jobs' },
    { firstName: 'steve1', lastName: 'jobs1' }
  ]
}).pipe(
  shareReplay(1) // 共享订阅，缓存最近1次结果，避免重复执行
);

// 2. 生成你需要的wantToAchieveObs$：直接提取原始data数组的Observable
this.wantToAchieveObs$ = apiData$.pipe(
  map(res => res.data)
);

// 3. 生成处理后的名字数组Observable，和之前的逻辑一致（修正拼写错误）
this.processedNames$ = apiData$.pipe(
  switchMap(res => from(res.data)), // 将数组转为流
  bufferCount(5), // 按5个一组缓冲（这里数据只有2个，所以最终是一个包含2个元素的数组）
  map(singleArray => singleArray.map(item => item.firstName)) // 修正firstName的拼写
);

// 4. 之后就可以在combineLatest中正常使用这两个Observable了
combineLatest([this.wantToAchieveObs$, this.processedNames$]).subscribe(([initialData, names]) => {
  console.log('初始数据:', initialData);
  console.log('处理后的名字数组:', names);
});

关键细节说明 #

• shareReplay(1)：这个操作符会让源Observable变成热Observable，同时缓存最近1次的发射值，这样后续所有订阅者都会拿到同一个缓存结果，不会重复执行源Observable（比如真实API请求只会发一次）。
• 分离副作用：我们不再在操作符内部赋值变量，而是通过纯操作符链分别生成需要的Observable，符合RxJS的设计理念。
• 修正拼写错误：确保能正确提取firstName字段。

如果你的RxJS版本较新（比如6+），记得要使用pipe来串联操作符，而不是链式调用旧版的操作符方法（比如Observable.of(...).map(...)），上面的代码已经适配了新版RxJS的写法。

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