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);