Question

对我来说，对于RxJs 5 share()运算符的工作原理并非100％明确，请参阅latest docs。 Jsbin提问here。

如果我创建一个0到2系列的observable，每个值相隔一秒：

var source = Rx.Observable.interval(1000)
.take(5)
.do(function (x) {
    console.log('some side effect');
});

如果我为这个observable创建两个订阅者：

source.subscribe((n) => console.log("subscriptor 1 = " + n));
source.subscribe((n) => console.log("subscriptor 2 = " + n));

我在控制台中得到了这个：

"some side effect ..."
"subscriptor 1 = 0"
"some side effect ..."
"subscriptor 2 = 0"
"some side effect ..."
"subscriptor 1 = 1"
"some side effect ..."
"subscriptor 2 = 1"
"some side effect ..."
"subscriptor 1 = 2"
"some side effect ..."
"subscriptor 2 = 2"

我认为每个订阅都会订阅相同的Observable，但似乎并非如此！它就像订阅行为创建了一个完全独立的Observable！

但是如果将share()运算符添加到源可观察源：

var source = Rx.Observable.interval(1000)
.take(3)
.do(function (x) {
    console.log('some side effect ...');
})
.share();

然后我们得到这个：

"some side effect ..."
"subscriptor 1 = 0"
"subscriptor 2 = 0"
"some side effect ..."
"subscriptor 1 = 1"
"subscriptor 2 = 1"
"some side effect ..."
"subscriptor 1 = 2"
"subscriptor 2 = 2"

如果没有share()，我会期待这一点。

这里发生了什么，share()运营商如何运作？每个订阅都会创建一个新的Observable链吗？

Answer 1

当您的文档链接似乎是RxJS v4时，请注意您使用的是RxJS v5。我不记得具体细节，但我认为share运算符经历了一些变化，特别是在完成和重新订阅时，但我不理解它。

回到您的问题，正如您在研究中所展示的那样，您的期望与图书馆设计不符。 Observables懒惰地实例化他们的数据流，具体地在订阅者订阅时启动数据流。当第二个订阅者订阅相同的observable时，另一个新的数据流被启动，好像它是第一个订阅者一样（所以是的，每个订阅都会像你所说的那样创建一个新的可观察链）。这就是RxJS术语中创造的冷可观察性，并且是RxJS可观察的默认行为。如果你想要一个observable将数据发送给它在数据到达时的订阅者，那么这就是一个热门的观察者，而获得热点可观察性的一种方法是使用share运算符。

您可以在此处找到插图的订阅和数据流：Hot and Cold observables : are there 'hot' and 'cold' operators?（这对RxJS v4有效，但大多数对v5有效。）

Answer 2

分享使得可观察的＆＃34;热＆＃34;如果满足以下两个条件：

订阅者数量＆gt; 0
并且观察结果尚未完成

场景1：订阅者数量＆gt;在新订阅之前未完成0和observable

var shared  = rx.Observable.interval(5000).take(2).share();
var startTime = Date.now();
var log = (x) => (value) => { 
    console.log(`onNext for ${x}, Delay: ${Date.now() - startTime} , Value: ${value}`);
};

var observer1 = shared.subscribe(log('observer1')),
    observer2;

setTimeout(()=>{
    observer2 = shared.subscribe(log('observer2'));
}, 3000);

// emission for both observer 1 and observer 2, with the samve value at startTime + 5 seconds
// another emission for both observers at: startTime + 10 seconds

场景2：新订阅前订阅者数量为零。变冷了＃34;

 var shared  = rx.Observable.interval(5000).take(2).share();
    var startTime = Date.now();
    var log = (x) => (value) => { 
    console.log(`onNext for ${x}, Delay: ${Date.now() - startTime} , Value: ${value}`);
};

var observer1 = shared.subscribe(log('observer1')),
    observer2;

setTimeout(()=>{
    observer1.unsubscribe(); 
}, 1000);

setTimeout(()=>{
    observer2 = shared.subscribe(log('observer2')); // number of subscribers is 0 at this time
}, 3000);
// observer2's onNext is called at startTime + 8 seconds
// observer2's onNext is called at startTime + 13 seconds

场景3：在新订阅之前完成observable。变冷了＃34;

 var shared  = rx.Observable.interval(5000).take(2).share();
    var startTime = Date.now();
    var log = (x) => (value) => { 
        console.log(`onNext for ${x}, Delay: ${Date.now() - startTime} , Value: ${value}`);
    };

var observer1 = shared.subscribe(log('observer1')),
    observer2;

setTimeout(()=>{
    observer2 = shared.subscribe(log('observer2'));
}, 12000);

// 2 emission for observable 1, at startTime + 5 secs, and at startTime + 10secs
// 2 emissions for observable 2,at startTime + 12 + 5 secs, and at startTime + 12 + 10secs

RxJs 5 share（）运算符如何工作？

2 个答案: