코드/JS

[rxjs] SwitchMap

Yeah-Panda 2020. 5. 8. 00:16

다수 스트림 : from([1, 2, 3, 4]) 혹은 interval(300) 등 각각의 값을 발행하는 개별 스트림들을 통칭.

switchMap operator 는 observable 컬렉션에서 다수 스트림 발행시( interable )
발행 완료되지 않은 이전 observable 이 존재한다면 이전 observable 을 구독해제하고
project 함수에서 반환하는 observable 을 새롭게 구독한다.

mergeMap operator 와 비교하자면,
다수 스트림 발행시 mergeMap 은 구독 완료되지 않은 이전 observable의 존재와는 무관하게
project 함수에서 반환되는 observable 을 모두 새롭게 구독한다.

private testSwitchMap() {
    interval(600).pipe(
        take(5),
        switchMap(x => {
            return interval(250).pipe(
                map(y => ({x, y})),
                take(3)
            );
        })
    ).subscribe(result => {
        console.log(`next x : ${result.x}, next y: ${result.y}`);
    });
}

/*
console output

next x : 0, next y: 0
next x : 0, next y: 1
next x : 1, next y: 0
next x : 1, next y: 1
next x : 2, next y: 0
next x : 2, next y: 1
next x : 3, next y: 0
next x : 3, next y: 1
next x : 4, next y: 0
next x : 4, next y: 1
next x : 4, next y: 2

*/

switchMap 의 project 함수에서 take(3) 를 적용한 observable 을 리턴하면 250 간격으로 두 번 값을 발행.
600 이후 새 x 값을 발행시 기존 구독 중인 observable 을 해제하기 때문에 switchMap project 함수의 750 차례의 값은 발행 불가
소스 observable 의 마지막 값인 4 발행시 그 다음을 구독할 observable 가 없음으로 x 값이 4일때 y 는 0 ~ 2값을 모두 발행(750)

'코드 > JS' 카테고리의 다른 글

[JS] query 읽어 오기  (0) 2020.05.20
[JS] 브라우저 언어 판단  (0) 2020.05.14
eslit disable  (0) 2020.01.15
[Jest] 'describe' is not defined no-undef error  (0) 2019.07.05
[JS]document.referrer  (0) 2016.06.14