우리는 논의했습니다. RxJS의 또 다른 핵심 개념은 Observer입니다.

관찰자란 무엇입니까?

Observer는 소비자가 해당 Observable을 구독한 후 Observable에서 방출 및 알림을 감시합니다.

Observer는 Observable 알림의 각 유형(다음, 오류 및 완료)에 대한 콜백 함수가 있는 인터페이스를 정의합니다.

내보낸 항목을 처리하려면 다음 콜백을 사용하십시오.
오류 콜백을 사용하여 예외 처리를 구현하십시오.
Observable이 완료되면 정리를 수행하려면 complete 콜백을 사용하십시오. (이것은 Angular 응용 프로그램에서 자주 사용되지 않습니다.)

관찰자를 어떻게 정의합니까?

관찰자를 정의하는 방법에는 여러 가지가 있습니다.

명시적으로(흔하지 않음)

일반적이지는 않지만 세 가지 콜백 함수(next, error 및 complete)를 사용하여 객체를 생성하여 Observer를 명시적으로 정의할 수 있습니다.

// Define an explicit observer (uncommon)
const observer = {
  next: apple => console.log(`Apple was emitted ${apple}`),
  error: err => console.log(`Error occurred: ${err}`),
  complete: () => console.log(`No more apples, go home`)
};

다음 메서드 인수는 내보낸 항목입니다. 화살표 기능은 해당 항목으로 수행할 작업을 지정합니다. 이 경우 단순히 콘솔에 기록합니다.

error 메서드 인수는 오류가 발생할 때 발생하는 오류입니다. 화살표 기능은 오류 알림으로 수행할 작업을 지정합니다. 이 경우 오류를 콘솔에 기록합니다.

complete 메서드에는 인수가 없습니다. 화살표 함수는 Observable이 완료되었을 때 수행할 작업을 정의합니다. 이 경우 콘솔에 메시지를 기록합니다.

그런 다음 해당 Observer 개체를 Observable 구독 방법으로 전달하여 Observable의 방출 및 알림에 반응합니다.

// Pass the Observer into the subscribe (uncommon)
const sub = source$.subscribe(observer);

단일 콜백 전달

Observer 콜백 함수를 Observable subscribe 메서드에 직접 전달하는 것이 더 일반적입니다.

하나의 개체만 subscribe 메서드에 전달할 수 있습니다.

다음 콜백만 필요한 경우 구독 인수로 직접 전달하십시오.

// Pass the next callback function directly
const sub = source$.subscribe(
   apple => console.log(`Apple was emitted ${apple}`)
);

관찰자 개체 전달

하나의 개체만 구독에 전달할 수 있으므로 여러 유형의 알림을 처리해야 하는 경우 원하는 콜백 세트와 함께 Observer 개체를 전달합니다.

// Pass an Observer object with callback arrow functions
const sub = source$.subscribe({
  next: apple => console.log(`Apple was emitted ${apple}`),
  error: err => console.log(`Error occurred: ${err}`),
  complete: () => console.log(`No more apples, go home`)
});

위의 코드는 next, error 및 complete 메서드를 사용하여 객체를 subscribe 메서드로 전달합니다. 처리할 알림에 대한 메서드만 지정하면 됩니다. 따라서 전체 알림을 처리할 필요가 없다면 지정할 필요가 없습니다.

화살표 함수를 사용하고 싶지 않다면?

이전 예제에서는 모두 => 로 표시된 화살표 함수를 사용했습니다. 일부 개발자는 관찰자 콜백을 정의할 때 화살표 함수 대신 선언된 명명 함수를 사용하는 것을 선호할 수 있습니다. 이와 같이:

const sub = source$.subscribe({
  next(apple) { console.log(`Apple was emitted ${apple}`) },
  error(err) { console.log(`Error occurred: ${err}`)},
  complete() { console.log(`No more apples, go home`)}
});

구문 차이를 확인하십시오. 여기에서 매개변수(apple)와 {}로 표시된 함수 본문을 사용하여 각 함수(next)를 정의합니다.

하지만 this 를 조심하세요. TypeScript(및 JavaScript)에서 this는 함수로 범위가 지정됩니다. 따라서 다음과 같은 코드가 있는 경우:

// Watch out for `this`
const sub = source$.subscribe({
  next(apple) { this.apple = apple }, // Does NOT reference the 
                                      // class-level variable
  error(err) { console.log(`Error occurred: ${err}`)},
  complete() { console.log(`No more apples, go home`)}
});

예상대로 작동하지 않을 수 있습니다. this.apple는 클래스 수준 변수를 참조하지 않고 대신 함수 범위 변수를 정의합니다.

조각은 어떻게 함께 맞습니까?

Observable, Observer 및 Subscription은 함께 작동하여 다음을 수행합니다.

Observable에게 방출/알림을 시작하라고 지시합니다

해당 방출/알림에 반응하는 콜백 함수 제공

구독 취소를 허용하는 구독 설정

보다 형식적인 대리석 다이어그램에 표시된 개념은 다음과 같습니다.


덕분에
이 대리석 도표를 위해.

다음은 Angular 애플리케이션에서 보다 일반적인 사용 예입니다.

서비스

  products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    );

위의 코드에서 products$는 Observable을 나타냅니다.

It is a common practice to add a $ suffix to a variable that represents an Observable. This makes it easier to see when the code is working with an Observable.

요소

ngOnInit(): void {
  this.sub = this.productService.products$.subscribe({
      next: products => this.products = products,
      error: err => this.errorMessage = err
    });
}

구성 요소에서 Observer 개체는 next 및 error라는 두 가지 콜백을 정의하는 subscribe 메서드로 전달됩니다.
this.sub는 subscribe 메소드에서 반환된 구독을 나타냅니다. 이것은 ngOnDestroy에서 구독을 취소하는 데 사용됩니다.

Observer라는 용어의 의미를 명확히 하고 RxJS의 세 가지 주요 개념인 Observable, Subscription 및 Observer가 어떻게 함께 작동하는지 보여주길 바랍니다.