GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== Observable ======
Observables는 애플리케이션의 게시자와 구독자간에 메시지 전달을 지원합니다.
Observables는 이벤트 처리, 비동기 프로그래밍 및 여러 값 처리를위한 다른 기술보다 중요한 이점을 제공합니다.

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

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

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

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

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

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

<code javascript>
// 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);
</code>

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

^ Notification Type ^ Description ^
|next|Required. 전달 된 각 값에 대한 핸들러입니다. 실행이 시작된 후 0 번 이상 호출됩니다.|
|error|Optional. 에러 통지 핸들러. 오류로 인해 관찰 가능한 인스턴스가 실행되지 않습니다.|
|complete|Optional. 실행 완료 통지의 핸들러. 지연된 값은 실행이 완료된 후에도 계속 다음 처리기로 전달 될 수 있습니다.|

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

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

>구독이 어떻게 작동하는지 보여주기 위해 새로운 관찰 가능을 만들어야합니다. 새로운 인스턴스를 생성하는 데 사용하는 생성자가 있지만 그림에서는 RxJS 라이브러리에서 자주 사용하는 유형의 간단한 관찰 가능 항목을 만드는 몇 가지 메소드를 사용할 수 있습니다.
>
>  * of (... items) - 인수로 제공된 값을 동 기적으로 전달하는 Observable 인스턴스를 반환합니다.
>  * from (iterable) - 인수를 Observable 인스턴스로 변환합니다. 이 방법은 일반적으로 배열을 관찰 가능으로 변환하는 데 사용됩니다.

다음은 관찰자가 수신 된 메시지를 콘솔에 기록하는 간단한 관찰 가능 객체를 생성하고 구독하는 예제입니다.
<code javascript>
// Create simple observable that emits three values
const myObservable = of(1, 2, 3);

// Create observer object
const myObserver = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

// Execute with the observer object
myObservable.subscribe(myObserver);
// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification
</code>
또는 subscribe () 메서드는 다음, 오류 및 완료 핸들러에 대해 라인에서 콜백 함수 정의를 허용 할 수 있습니다. 예를 들어, 다음 subscribe () 호출은 사전 정의 된 관찰자를 지정하는 호출과 같습니다.
<code javascript>
myObservable.subscribe(
  x => console.log('Observer got a next value: ' + x),
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);
</code>
두 경우 모두 다음 처리기가 필요합니다. 오류 및 완전한 핸들러는 선택적입니다.

next () 함수는 문맥에 따라 메시지 문자열이나 이벤트 객체, 숫자 값 또는 구조체를받을 수 있습니다. 일반적인 용어로, 우리는 관찰 대상에 의해 게시 된 데이터를 스트림이라고합니다. 모든 유형의 값은 관측 가능으로 표시 될 수 있으며 값은 스트림으로 게시됩니다.

===== Creating observables =====
Observable 생성자를 사용하여 모든 유형의 관찰 가능한 스트림을 만듭니다. 관찰자의 subscribe () 메소드가 실행될 때 생성자 함수를 인수로 취합니다. 구독자 함수는 Observer 객체를 받고 observer의 next () 메서드에 값을 게시 할 수 있습니다.

예를 들어, 위의 (1, 2, 3)에 해당하는 관찰 가능 항목을 만들려면 다음과 같이하면됩니다.
<code javascript>
// This function runs when subscribe() is called
function sequenceSubscriber(observer) {
  // synchronously deliver 1, 2, and 3, then complete
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();

  // unsubscribe function doesn't need to do anything in this
  // because values are delivered synchronously
  return {unsubscribe() {}};
}

// Create a new Observable that will deliver the above sequence
const sequence = new Observable(sequenceSubscriber);

// execute the Observable and print the result of each notification
sequence.subscribe({
  next(num) { console.log(num); },
  complete() { console.log('Finished sequence'); }
});

// Logs:
// 1
// 2
// 3
// Finished sequence
</code>
이 예제를 좀 더 자세히 살펴보기 위해, 이벤트를 퍼블리시하는 observable을 생성 할 수 있습니다. 이 예에서 가입자 함수는 인라인으로 정의됩니다.
<code javascript>
function fromEvent(target, eventName) {
  return new Observable((observer) => {
    const handler = (e) => observer.next(e);

    // Add the event handler to the target
    target.addEventListener(eventName, handler);

    return () => {
      // Detach the event handler from the target
      target.removeEventListener(eventName, handler);
    };
  });
}
</code>
이제이 함수를 사용하여 keydown 이벤트를 게시하는 관찰 가능 객체를 만들 수 있습니다.
<code javascript>
const ESC_KEY = 27;
const nameInput = document.getElementById('name') as HTMLInputElement;

const subscription = fromEvent(nameInput, 'keydown')
  .subscribe((e: KeyboardEvent) => {
    if (e.keyCode === ESC_KEY) {
      nameInput.value = '';
    }
  });
</code>
===== Multicasting =====
일반적인 관찰 가능은 각 가입 된 관찰자에 대해 새롭고 독립적 인 실행을 만듭니다. 관찰자가 구독 할 때, 관찰 대상은 이벤트 처리기를 연결하고 그 값을 해당 관찰자에게 전달합니다. 두 번째 관찰자가 구독하면 관측 가능 이벤트가 새 이벤트 처리기를 연결하고 별도의 실행에서 두 번째 관찰자에게 값을 제공합니다.

때로는 각 구독자에 대해 독립적 인 실행을 시작하는 대신 값이 이미 방출되기 시작한 경우에도 각 구독이 동일한 값을 갖기를 원할 수 있습니다. 이것은 문서 객체에 대한 클릭이 관찰되는 것과 같은 경우 일 수 있습니다.

멀티 캐스팅은 단일 실행으로 여러 구독자 목록에 브로드 캐스트하는 관행입니다. 멀티 캐스트를 관찰 할 수있는 경우 문서에 여러 수신기를 등록하지 않고 첫 번째 수신기를 다시 사용하고 값을 각 구독자에게 보냅니다.

관측 가능을 만들 때 관측 대상을 어떻게 사용할 것인지, 그리고 그 값을 멀티 캐스팅할지 여부를 결정해야합니다.

1에서 3까지 카운트하는 예제를 보자. 각 숫자가 출력 된 후 1 초가 지체된다.

<code javascript>
function sequenceSubscriber(observer) {
  const seq = [1, 2, 3];
  let timeoutId;

  // Will run through an array of numbers, emitting one value
  // per second until it gets to the end of the array.
  function doSequence(arr, idx) {
    timeoutId = setTimeout(() => {
      observer.next(arr[idx]);
      if (idx === arr.length - 1) {
        observer.complete();
      } else {
        doSequence(arr, ++idx);
      }
    }, 1000);
  }

  doSequence(seq, 0);

  // Unsubscribe should clear the timeout to stop execution
  return {unsubscribe() {
    clearTimeout(timeoutId);
  }};
}

// Create a new Observable that will deliver the above sequence
const sequence = new Observable(sequenceSubscriber);

sequence.subscribe({
  next(num) { console.log(num); },
  complete() { console.log('Finished sequence'); }
});

// Logs:
// (at 1 second): 1
// (at 2 seconds): 2
// (at 3 seconds): 3
// (at 3 seconds): Finished sequence
</code>
두 번 구독하면 두 개의 스트림이 나올 것이고 각 스트림은 매초마다 값을 방출합니다. 다음과 같이 보입니다.
<code javascript>
// Subscribe starts the clock, and will emit after 1 second
sequence.subscribe({
  next(num) { console.log('1st subscribe: ' + num); },
  complete() { console.log('1st sequence finished.'); }
});

// After 1/2 second, subscribe again.
setTimeout(() => {
  sequence.subscribe({
    next(num) { console.log('2nd subscribe: ' + num); },
    complete() { console.log('2nd sequence finished.'); }
  });
}, 500);

// Logs:
// (at 1 second): 1st subscribe: 1
// (at 1.5 seconds): 2nd subscribe: 1
// (at 2 seconds): 1st subscribe: 2
// (at 2.5 seconds): 2nd subscribe: 2
// (at 3 seconds): 1st subscribe: 3
// (at 3 seconds): 1st sequence finished
// (at 3.5 seconds): 2nd subscribe: 3
// (at 3.5 seconds): 2nd sequence finished
</code>
observable을 멀티 캐스팅으로 변경하면 다음과 같이 보일 수 있습니다.
<code javascript>
function multicastSequenceSubscriber() {
  const seq = [1, 2, 3];
  // Keep track of each observer (one for every active subscription)
  const observers = [];
  // Still a single timeoutId because there will only ever be one
  // set of values being generated, multicasted to each subscriber
  let timeoutId;

  // Return the subscriber function (runs when subscribe()
  // function is invoked)
  return (observer) => {
    observers.push(observer);
    // When this is the first subscription, start the sequence
    if (observers.length === 1) {
      timeoutId = doSequence({
        next(val) {
          // Iterate through observers and notify all subscriptions
          observers.forEach(obs => obs.next(val));
        },
        complete() {
          // Notify all complete callbacks
          observers.slice(0).forEach(obs => obs.complete());
        }
      }, seq, 0);
    }

    return {
      unsubscribe() {
        // Remove from the observers array so it's no longer notified
        observers.splice(observers.indexOf(observer), 1);
        // If there's no more listeners, do cleanup
        if (observers.length === 0) {
          clearTimeout(timeoutId);
        }
      }
    };
  };
}

// Run through an array of numbers, emitting one value
// per second until it gets to the end of the array.
function doSequence(observer, arr, idx) {
  return setTimeout(() => {
    observer.next(arr[idx]);
    if (idx === arr.length - 1) {
      observer.complete();
    } else {
      doSequence(observer, arr, ++idx);
    }
  }, 1000);
}

// Create a new Observable that will deliver the above sequence
const multicastSequence = new Observable(multicastSequenceSubscriber());

// Subscribe starts the clock, and begins to emit after 1 second
multicastSequence.subscribe({
  next(num) { console.log('1st subscribe: ' + num); },
  complete() { console.log('1st sequence finished.'); }
});

// After 1 1/2 seconds, subscribe again (should "miss" the first value).
setTimeout(() => {
  multicastSequence.subscribe({
    next(num) { console.log('2nd subscribe: ' + num); },
    complete() { console.log('2nd sequence finished.'); }
  });
}, 1500);

// Logs:
// (at 1 second): 1st subscribe: 1
// (at 2 seconds): 1st subscribe: 2
// (at 2 seconds): 2nd subscribe: 2
// (at 3 seconds): 1st subscribe: 3
// (at 3 seconds): 1st sequence finished
// (at 3 seconds): 2nd subscribe: 3
// (at 3 seconds): 2nd sequence finished
</code>
> 멀티 캐스팅 관측 값은 좀 더 많은 설정을 필요로하지만 특정 응용 프로그램에 유용 할 수 있습니다. 나중에 멀티 캐스팅 프로세스를 단순화하는 도구를 살펴보고 관찰 할 수있게하고 멀티 캐스팅 할 수 있도록합니다.

===== Error handling =====
observables는 값을 비동기 적으로 생성하므로 try/catch는 효과적으로 오류를 catch하지 않습니다. 대신, 관찰자에 오류 콜백을 지정하여 오류를 처리합니다. 또한 오류를 생성하면 관찰자가 구독을 정리하고 값 생성을 중지합니다. 관찰 가능 객체는 값을 생성하거나 (다음 콜백 호출) 완료하거나 완료 또는 오류 콜백을 호출 할 수 있습니다.

<code javascript>
myObservable.subscribe({
  next(num) { console.log('Next num: ' + num)},
  error(err) { console.log('Received an errror: ' + err)}
});
</code>
오류 처리 (특히 오류에서 복구)에 대해서는 나중에 자세히 설명합니다.
GaramX

사용자 도구

사이트 도구

문서 도구
