RxJS 시리즈 자습서(6) Observable 및 Observer

사용자 정의 Observable 만들기
앞에서 설명한 바와 같이 RxJS에서 제공하는 from() 및 of() 함수를 사용하여 Observable 객체를 만들었습니다.그러나 Observable가 어떻게 Observer와 상호작용을 하는지, 구독을 취소하는지는 RxJS가 어떻게 작동하는지 이해하는데 도움이 된다.
여기서 우리가 해야 할 일은 하나의observable 함수를 실현하고 일부 파라미터를 받아들여서 하나의 대상을 되돌려 주는 것이다. 예를 들어subscription 대상이다.우리는 이 대상을 이용하여 자원을 방출한다.

const observable = dataSource => {
  const INTERVAL = 1000;
  let schedulerId;
  
  return {
    subscribe: observer => {// observer 
      schedulerId = setInterval(() => {
        if(dataSource.length === 0) {
          observer.complete();// observer ( ) 
          clearInterval(schedulerId);
          schedulerId = undefined;
        } else {
          observer.next(dataSource.shift());// ( ) observer
        }
      }, INTERVAL);
      
      return {// ， subscription， 
        unsubscribe: () => {// ， ( ) observer
          if(schedulerId) {
            clearInterval(schedulerId);
          }
        }
      };
    }
  }
};

어떻게 사용하는지 알아보기

let subscription = observable([1, 2, 3]).subscribe({// subscribe observer 
  next: console.log,// next 
  complete: () => console.log(' ')// complete 
});

위 코드의 결과는 컨트롤러에서 1초 간격으로 숫자를 출력하고 마지막에'이벤트 모두 발송 완료'를 출력하는 것이다.다음 그림은 다음과 같습니다.
자체 observable 만들기
다음 그림에서는 이벤트가 모두 전송되기 전에 작업을 취소하는 방법을 살펴보겠습니다.
가입 취소 작업
1초에 한 개의 이벤트를 보내기 때문에 우리는 2초 후에 구독 취소 함수를 호출했기 때문에 결과는 1, 2만 출력되었다. 이는 이벤트 발송 작업이 취소되었다는 것을 의미한다.
RxJS에서는 위와 같은 기능을 수행하기 위해 Observable의 정적 함수 create()를 제공합니다.

const observable = Rx.Observable.create(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

const subscription = observable.subscribe(console.log);

create() 함수는 하나의 함수를 매개 변수로 받아들인다. 이 매개 변수 함수는 실제적으로observable라는 대상의subscribe 함수이다. 위에서 우리가 정의한subscribe 함수와 같다.사용할 때subscribe 함수에 전달되는 것은 observer가 아니라 함수입니다. RxJS 내부에서subscribe 함수의 재부팅은 자동으로 observer를 만들고 console를 생성합니다.log 이 함수는next 함수에 값을 부여했다. 즉,observer.next(1) 이 조작은 실제적으로 호출된console입니다.log(1) - 콘솔에서 숫자 1을 인쇄합니다.여기서 주의해야 할 것은, 만약observable 포장의 데이터 원본이 유한한 개수라면,complete () 함수를 호출해서 모든 데이터 (이벤트) 가 발송되었다는 것을 나타낼 수 있다는 것이다.
종합적으로, 우리는 Observable를 사용자 정의하고, 데이터를 보내는 행위를 사용자 정의할 수 있으며, 전체 응용 프로그램에서 언제든지 다시 사용할 수 있다.
Observable는 Promise가 만들어지면 실행되지 않는 불활성 값입니다.