[ReactiveX]구독자 생성하는 방법

[ReactiveX]구독자 생성하는 방법

구독자(observer) 생성하는 방법

구독하기(subscribe)

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

const { from } = rxjs
const observable$ = from([1, 2, 3, 4, 5])

// 구독자 상수로 선언
const observer = {
  next: console.log,
  error: err => console.error('발행중 오류', err),
  complete: () => console.log('발행물 완결'),
}

// 구독
observable$.subscribe(observer)

// 부분적으로만 지정
const observer_1 = {
  next: console.log,
  error: err => console.error('발행중 오류', err),
}

const observer_2 = {
  next: console.log
}

// subscribe 내부에서 구독자 생성
observable$.subscribe(
  console.log,
  err => console.error('발행중 오류', err),
  _ => console.log('발행물 완결')
)

구독자가 가질 수 있는 요소는 next, error, complete가 있다. 구독자를 생성하기 위해서는 이 세가지 요소를 정의 해주면되는데 세 가지 모두 꼭 넣을 필요는 없다. 구독자를 선언할 때는 상수로 선언 재활용 가능하게 만들 수도 있으며 구독할 때 바로 세 가지 요소를 정의해 줄 수도 있다.

Error

에러가 발생하면 그 이후에 코드는 실행되지 않는다.

const { Observable } = rxjs

const obs$ = new Observable(subscriber => {
  subscriber.next(1)
  subscriber.next(2)
  subscriber.next(3)
  (null)[0] // 발행중 오류
  subscriber.next(4) // 실행되지 않음
  subscriber.compled(); // 실행되지 않음
})

obs$.subscribe(
  console.log,
  err => console.error('발행중 오류', err),
  _ => console.log('발행물 완결')
)

<console>

complete

complete 후에는 그 이후에 코드가 있더라도 실행되지 않는다.

const { Observable } = rxjs

const obs$ = new Observable(subscriber => {
  subscriber.next(1)
  subscriber.next(2)
  subscriber.next(3)
  subscriber.complete()
  subscriber.next(4)
})

obs$.subscribe(
  console.log,
  err => console.error('발행중 오류', err),
  _ => console.log('발행물 완결')
)

<console>

구독 해제하기(unsubscribe)

구독은 해제하지 않는 이상 계속된다.

const { interval } = rxjs

const obs$ = interval(1000)
const subscription = obs$.subscribe(console.log)

<console>

unsubscribe로 구독을 해제할 수 있다. 다음 코드는 5초 후에 구독 해제하는 코드이다.

const { interval } = rxjs

const obs$ = interval(1000)
const subscription = obs$.subscribe(console.log)

setTimeout(_ => subscription.unsubscribe(), 5500)

<console>

다음 코드는 구독 해제 후 다시 구독을 하는 코드이다. 옵져버블 자체를 complete하는 것이 아닌 특정 구독자만 구독을 해제해야하는 경우 해당 옵져버블을 재사용할 수 있다.

const { interval } = rxjs

const obs$ = interval(1000)
const subscription = obs$.subscribe(console.log)

setTimeout(_ => subscription.unsubscribe(), 5500)

setTimeout(_ => obs$.subscribe(console.log), 7500)

<console>