Programing

RxJs 5 공유() 운영자는 어떻게 작동하나?

c10106 2022. 4. 3. 19:47
반응형

RxJs 5 공유() 운영자는 어떻게 작동하나?

내가 알기로는 RxJs 5가 100% 확실하지 않다.share()운영자 작업, 최신 문서를 참조하십시오.Jsbin은 여기서 질문한다.

0 ~ 2의 시리즈로 관측 가능한 값을 생성하는 경우 각 값은 1초로 구분:

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

그리고 만약 내가 이 관찰 가능성의 구독자를 두 명 만든다면:

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"

각 구독이 동일한 관찰 가능 서비스에 가입할 줄 알았는데, 그렇지 않은 것 같아!그것은 구독이 완전히 별개의 관찰 가능을 창조하는 것과 같다!

하지만 만약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()운영자 업무 ? 각 구독이 관찰 가능한 새로운 체인을 만드는가?

설명서 링크가 RxJS v4인 것처럼 보일 때 RxJS v5를 사용하고 있는지 주의하십시오.자세한 건 기억이 안 나지만 그 이유는share운영자는 특히 완료 및 재제출과 관련하여 몇 가지 변경사항을 겪었지만, 내 말을 믿지 마십시오.

다시 질문으로 돌아가서, 당신이 연구에서 보여준 것과 같이, 당신의 기대는 도서관 디자인에 부합하지 않는다.관측가능성은 그들의 데이터 흐름을 느리게 인스턴스화하여 가입자가 가입할 때 데이터 흐름을 구체적으로 개시한다.두 번째 가입자가 같은 관측 가능한 구독자에 가입하면, 마치 첫 번째 구독자인 것처럼 또 다른 새로운 데이터 흐름이 시작된다(그러므로 그렇다, 각 구독은 당신이 말한 것처럼 새로운 관찰 가능성의 체인을 만든다).이것은 RxJS 용어에 콜드 관측 가능한 것으로서 만들어진 것이며 그것이 RxJS 관측 가능한 기본 행동이다.만약 당신이 데이터가 도착하는 순간에 그것의 데이터를 그것이 가진 가입자에게 보내는 관찰 가능을 원한다면, 이것은 뜨거운 관찰이 가능한 것으로 만들어진다. 그리고 뜨거운 관찰 가능을 얻는 한 가지 방법은 그것을 사용하는 것이다.share교환원의

당신은 여기에서 그림 구독과 데이터 흐름을 찾을 수 있다: 고온저온 관측 가능: '핫'과 '콜드' 운영자가 있는가?(이것은 RxJS v4에 대해 유효하지만 대부분은 v5에 유효하다.)

다음 두 가지 조건이 충족될 경우, 공유는 관측 가능한 "핫"을 만든다.

  1. 가입자 수 > 0
  2. 그리고 관찰이 완료되지 않았다.

시나리오1: 가입자 수 > 0이며 관측 가능한 가입자 수는 신규 가입 전에 완료되지 않음

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: 신규 가입 전 가입자는 0명이다."콜드"가 됨

 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: 신규 가입 전에 관찰이 완료된 경우."콜드"가 됨

 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

참조URL: https://stackoverflow.com/questions/35141722/how-does-the-rxjs-5-share-operator-work

반응형