Observables는 애플리케이션의 게시자와 구독자간에 메시지 전달을 지원합니다. Observables는 이벤트 처리, 비동기 프로그래밍 및 여러 값 처리를위한 다른 기술보다 중요한 이점을 제공합니다.

Observables는 선언적입니다. 즉, 값을 게시하기위한 함수를 정의하지만 소비자가이 값을 구독 할 때까지 실행되지 않습니다. 그런 다음 구독 된 소비자는 함수가 완료되거나 구독을 취소 할 때까지 알림을받습니다.

관찰 가능 항목은 컨텍스트에 따라 유형, 리터럴, 메시지 또는 이벤트의 여러 값을 전달할 수 있습니다. 값을 수신하기위한 API는 값이 동 기적으로 또는 비동기 적으로 전달되는지 여부에 관계없이 동일합니다. 설정 및 해체 논리는 모두 관찰 가능 항목에 의해 처리되므로 응용 프로그램 코드는 값을 소비하기 위해 가입 할 필요가없고, 완료하면 가입을 취소 할 필요가 있습니다. 스트림이 키 스트로크, HTTP 응답 또는 간격 타이머에 관계없이 값을 듣고 청취를 중지하는 인터페이스는 동일합니다.

이러한 이점 때문에 Observable은 Angular 내에서 광범위하게 사용되며 앱 개발에도 권장됩니다.

게시자는 가입자 함수를 정의하는 Observable 인스턴스를 만듭니다. 이것은 소비자가 subscribe() 메서드를 호출 할 때 실행되는 함수입니다. 구독자 기능은 게시 할 값 또는 메시지를 얻거나 생성하는 방법을 정의합니다.

작성한 관찰 가능 객체를 실행하고 통지 수신을 시작하려면 관찰자를 전달하여 subscribe() 메소드를 호출합니다. 이것은 수신 통지에 대한 핸들러를 정의하는 JavaScript 객체입니다. subscribe() 호출은 알림 수신을 중지하기 위해 호출하는 unsubscribe() 메서드가있는 Subscription 객체를 반환합니다.

다음은 geolocation 업데이트를 제공하기 위해 관찰 가능 정보를 사용하는 방법을 보여줌으로써 기본 사용 모델을 보여주는 예제입니다.

// Create an Observable that will start listening to geolocation updates
// when a consumer subscribes.
const locations = new Observable((observer) => {
  // Get the next and error callbacks. These will be passed in when
  // the consumer subscribes.
  const {next, error} = observer;
  let watchId;
 
  // Simple geolocation API check provides values to publish
  if ('geolocation' in navigator) {
    watchId = navigator.geolocation.watchPosition(next, error);
  } else {
    error('Geolocation not available');
  }
 
  // When the consumer unsubscribes, clean up data ready for next subscription.
  return {unsubscribe() { navigator.geolocation.clearWatch(watchId); }};
});
 
// Call subscribe() to start listening for updates.
const locationsSubscription = locations.subscribe({
  next(position) { console.log('Current Position: ', position); },
  error(msg) { console.log('Error Getting Location: ', msg); }
});
 
// Stop listening for location after 10 seconds
setTimeout(() => { locationsSubscription.unsubscribe(); }, 10000);

관찰 가능한 통지를 수신하기위한 핸들러는 Observer 인터페이스를 구현합니다. 관찰 가능 객체가 전송할 수있는 세 가지 유형의 통지를 처리하는 콜백 메소드를 정의하는 객체입니다.

옵저버 객체는 이러한 핸들러의 조합을 정의 할 수 있습니다. 통지 유형에 대한 핸들러를 제공하지 않으면, 옵저 v는 해당 유형의 통지를 + 시합니다.

Observable 인스턴스는 누군가가 구독 할 때만 값을 게시하기 시작합니다. 인스턴스의 subscribe () 메서드를 호출하고 관찰자 객체를 전달하여 구독을 구독합니다.

구독이 어떻게 작동하는지 보여주기 위해 새로운 관찰 가능을 만들어야합니다. 새로운 인스턴스를 생성하는 데 사용하는 생성자가 있지만 그림에서는 RxJS 라이브러리에서 자주 사용하는 유형의 간단한 관찰 가능 항목을 만드는 몇 가지 메소드를 사용할 수 있습니다.

* of (… items) - 인수로 제공된 값을 동 기적으로 전달하는 Observable 인스턴스를 반환합니다.
* from (iterable) - 인수를 Observable 인스턴스로 변환합니다. 이 방법은 일반적으로 배열을 관찰 가능으로 변환하는 데 사용됩니다.