RxJS 中的缓存操作：cache、shareReplay 与 publishReplay 的区别及使用方式
RxJS 是一个强大的响应式编程库，它允许我们以一种可预测的方式处理异步数据流。当我们有多个使用相同数据源的观察者时，我们经常需要缓存先前观察者的结果以避免重复工作和网络请求。 RxJS 的 cache、shareReplay 和 publishReplay 操作符允许我们缓存操作符的结果，以便任何后续订阅都可以共享缓存值，从而避免重复工作。
cache 操作符
cache 操作符可用于将可观察序列缓存为数组。它将在订阅流中的第一个消费者上添加并执行原始源，然后将数据缓存为数组，并且每个后续订阅都会立即使用该数组。如果您希望缓存可观察者的结果作为数组，并且永久共享该结果，请使用 cache 操作符。
//示例代码
import { interval } from 'rxjs'; import { cache } from 'rxjs/operators';
const observable = interval(3000).pipe(cache());
observable.subscribe(value => console.log('Subscriber A: ', value));
setTimeout(() => { observable.subscribe(value => console.log('Subscriber B: ', value)); }, 5000);
setTimeout(() => { observable.subscribe(value => console.log('Subscriber C: ', value)); }, 10000);
// 输出： // Subscriber A: 0 // Subscriber A: 1 // Subscriber A: 2 // Subscriber A: 3 // Subscriber A: 4 // Subscriber B: 0 // Subscriber B: 1 // Subscriber B: 2 // Subscriber B: 3 // Subscriber B: 4 // Subscriber C: 0 // Subscriber C: 1 // Subscriber C: 2 // Subscriber C: 3 // Subscriber C: 4
shareReplay 操作符
shareReplay 操作符可用于共享缓存的结果，并在订阅流的第一个消费者上添加并执行原始源。 shareReplay 运算符以缓存的形式共享源流的输出，它保留最新的 n 个元素（这是一个可选参数）。如果需要缓存 observable 结果，并想要共享结果流，但您并不想永久保留结果，那么使用 shareReplay 操作符是个好选择。
//示例代码
import { interval } from 'rxjs'; import { shareReplay } from 'rxjs/operators';
const observable = interval(3000).pipe(shareReplay(1));
observable.subscribe(value => console.log('Subscriber A: ', value));
setTimeout(() => { observable.subscribe(value => console.log('Subscriber B: ', value)); }, 5000);
setTimeout(() => { observable.subscribe(value => console.log('Subscriber C: ', value)); }, 10000);
// 输出： // Subscriber A: 0 // Subscriber A: 1 // Subscriber A: 2 // Subscriber B: 2 // Subscriber A: 3 // Subscriber B: 3 // Subscriber A: 4 // Subscriber B: 4 // Subscriber C: 2 // Subscriber C: 3 // Subscriber C: 4
publishReplay 操作符
publishReplay 操作符是 shareReplay 的可连接版本。publishReplay 与 shareReplay 相似，它与原始源的消费方式相似，并缓存和共享结果，但是它作为一个可连接操作符，在调用 connect() 之前不会执行源 observable。如果需要共享 observable 结果，并且需要在连接到 observable 之前执行某些其他操作时，可以使用 publishReplay 操作符。
//示例代码
import { interval } from 'rxjs'; import { publishReplay, refCount } from 'rxjs/operators';
const observable = interval(3000) .pipe(publishReplay(1), refCount());
observable.subscribe(value => console.log('Subscriber A: ', value));
setTimeout(() => { observable.subscribe(value => console.log('Subscriber B: ', value)); }, 5000);
setTimeout(() => { observable.subscribe(value => console.log('Subscriber C: ', value)); }, 10000);
// 输出： // Subscriber A: 0 // Subscriber A: 1 // Subscriber A: 2 // Subscriber B: 2 // Subscriber A: 3 // Subscriber B: 3 // Subscriber A: 4 // Subscriber B: 4 // Subscriber C: 2 // Subscriber C: 3 // Subscriber C: 4
总结
cache 操作符缓存可观察者的结果作为数组，并永久共享该结果。shareReplay 操作符用于共享缓存的结果，但保留最新的 n 个元素。publishReplay 操作符与 shareReplay 相同，但是它是一个连接操作符，需要调用 connect() 方法才能执行。不同的选项可以应用于这些缓存操作符来实现想要的效果。在复杂的 RxJS 应用程序中，了解它们之间的区别对于避免强引用、内存泄漏和实现正确的换行策略非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab943948841e989476459e