Angular - Observable

anrnyeondo·2022년 10월 25일
0

JS + Angular

목록 보기
7/7

들어가기 전 ...

이제 Angular에 대한 대략적인 개념은 잡고 가는거 같다. 사실 더 많은 내용이 있지만, 전부 정리 하기에는 부담되서 여기까지만 하려고 한다. 아마도 다음 정리는 프로메테우스와 그라파나로 모니터링 환경 구축을 한 내용을 정리할 것 같다. 사실 필요하다고 해서 개념 정리하고 환경 구축까지 해놨는데 사용 안 해서 섭섭하고 있다...

옵저버블(Observable)

  • 비동기 로직을 처리할 때 사용하는 기능
  • 발행자는 구독자 함수를 사용해 Observable 인스턴스 생성
  • 구독자 함수는 구독자가 subscribe 메서드를 사용할 때 실행되어 데이터나 메세지를 생성하고 발행
  • 구독자 함수를 subscribe로 구독할 때 옵저버를 함께 전달한다. 옵저버는 옵저버블에서 발행돈 데이터를 처리하는 로직
  • 옵저버블의 subscribe를 실행하면 반환되는 Subscription 타입의 객체가 옵저버

옵저버(Observer)

  • 옵저버블 스트림을 처리하기 위해 Observer 인터페이스로 옵저버를 정의
  • 이 옵저버는 세 종류의 알림을 처리하는 콜백함수로 구성
알림타입설명
next데이터스트림을 처리하는 핸들러
error (option)에러 스트림을 처리하는 핸들러
complete (option)옵저저블 종료 스트림을 처리하는 핸들러

구독(Subscripbing)

  • Observer 인스턴스는 누군가 이 옵저버블을 구독해야 데이터를 발행
  • 옵저버블 인스턴스에서 제공하는 subscribe 메서드를 통해 구독하며, 옵저버블을 처리하는 옵저버 객체를 같이 반환
const myObservable = of(1, 2, 3); // of는 observable한 객체로 반환
const myObserver = {
 next: (x: number) => console.log('Observer got a next value: ' + x),
 error: (err: Error) => console.error('Observer got an error: ' + err),
 complete: () => console.log('Observer got a complete notification'),
};
// .
myObservable.subscribe(myObserver);
// :
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification

옵저버블의 구독에 옵저버 객체를 인자로 넣는 방식 말고, 바로 핸들러 함수를 넘기는 방법도 사용 가능

옵저버블 생성

옵저버블 스트림 생성은 Observable 생성자를 통해 만들고, 이 때 구독자 함수를 인자로 받는다. 해당 구독자 함수는 Observer 객체 를 인자로 받고 Observer의 next 함수를 통해 옵저버블 스트림을 발행

// subscribe() .
function sequenceSubscriber(observer: Observer<number>) {
  // 1, 2, 3 , .
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
  return {unsubscribe() {}};
}

// Observable .
const sequence = new Observable(sequenceSubscriber);

sequence.subscribe({
 next(num) { console.log(num); },
 complete() { console.log('Finished sequence'); }
});
// :
// 1
// 2
// 3
// Finished sequence

옵저버블과 프로미스

공통점

  • 두 방식 모두 비동기 데이터 처리를 다루고, 데이터 생성자가 전달 받은 콜백 함수
  • 프로미스는 resolve, 옵저버블은 next를 통해 데이터를 넘겨준다.

차이점

  • 프로미스의 경우 하나의 데이터에 대한 비동기 처리를 지원한다. 따라서 한 번 처리된 값에 대해서는 다시 사용할 수 없고 취소할 수 없다.
  • 옵저버블의 경우 데이터 스트림으로 여러 데이터에 대한 비동기 처리가 가능하다. 또한 subscribe와 unsubscribe를 통해 데이터를 받을지 받지 않을지 결정할 수 있다

Reference

https://angular.kr/guide/observables

0개의 댓글