如何在不创建新实例的情况下通过管道传递 observable答案

【问题标题】：how to pipe an observable without creating a new instance如何在不创建新实例的情况下通过管道传递 observable
【发布时间】：2020-04-24 07:25:18
【问题描述】：

假设我有一个代表可分页表中页面的主题：

pageCount$

然后我将其通过管道传输到一个新变量中，该变量通过 API 获取表的数据：

const tableData$ = pageCount$.pipe(switchMap(pageCount => getTableData(pageCount)));

这很好用，每次我发出一个新页面时，tableData$ 都会发出该页面的数据。

现在问题和我想解决的问题来了。

在我的页面上，我还希望使用该表数据来显示它当前包含的平均值。所以我想我可以将tableData$ 通过一个执行这些平均值的地图来传递。

const averageData$ = tableData$.pipe(map(data => performAverages(data)));

这可行，但是因为每次我订阅每个变量它都会创建一个新实例，所以我的 API 调用会发生两次。一次用于tableData$ 订阅，一次用于averageData$ 订阅。不过，我理解这种行为是设计使然。

感觉就像我想使用某种分叉/叉子运算符，但我不认为这样的运算符存在。

是否有可能在只调用一次 api 的同时执行这些任务？

谢谢

【问题讨论】：

标签： javascript rxjs

【解决方案1】：

您可以使用share 运算符来实现此目的。

首先创建调用 API 的 observable，并使用 share 进行管道传输

https://www.learnrxjs.io/learn-rxjs/operators/multicasting/share.

然后生成的 observable 可以被订阅两次，两次订阅都会收到相同的结果，而共享的 observable 不会被调用两次（“多播”）。

这应该会给你一些类似的东西：

const tableData$ = pageCount$.pipe(
    switchMap(pageCount => getTableData(pageCount)),
    tap(_ => console.log('API called')),
    share()
);

// subscribe to tabledata$ twice

tableData$.subscribe(_ => console.log('get and use data once'));
tableData$.subscribe(_ => console.log('get and use data a second time'));

（待测试，感谢反馈！）

【讨论】：

感谢。使用 Angular 及其异步管道为我订阅。一旦发生这种情况，应该能够使用它的生命周期挂钩来连接它们。
没错，很高兴为您提供帮助！而且您不需要使用不相关的代码来膨胀一张地图或订阅。
使用publish，您必须调用tableData$.connect() 才能发出任何内容。我认为使用share 而不是publish 将是您所需要的。

【解决方案2】：

这样的事情呢

const tableData$ = pageCount$.pipe(
   switchMap(pageCount => getTableData(pageCount).pipe(
      map(data => 
         const avg = performAverages(data);
         return {data, avg}
      )
   ))
);

通过这种方式，您可以获得一个包含表格数据及其平均值的对象，这就是我理解您正在寻找的。p>

【讨论】：

谢谢，这也可以，而且会成为我的后备力量。然而，对于所需的架构，两个独立的 observables 更可取。