Puedes leer la versión en español .

이 집중에서 우리는 우리 자신의 관찰할 수 있는 실현을 구축할 것이다.나는 이 글의 마지막에 우리가 RxJS 등 라이브러리에서 사용하는 이런 모델을 더욱 잘 이해할 수 있기를 바란다.

관찰 값 정보

이게 어떻게 된 일입니까?

관찰할 수 있는 나의 정의부터 시작합시다.

An Observable is a function that follows a convention and is used to connect a data source with a consumer.

우리의 예에서 데이터 원본은 값이 발생하는 것이다.소비자는 데이터 원본에서 값을 받는 물건이다.

재미있는 사실

관찰 대상은 게으르다

이것은 그들이 절대적으로 필요하기 전에 어떤 일도 하지 않을 것이라는 것을 의미한다.네가 구독하지 않으면 아무 일도 일어나지 않을 것이다.

그것들은 여러 개의 값을 보낼 수 있다

데이터 원본에 따라 유한한 수량의 값이나 무한한 수량의 값 흐름을 수신할 수 있습니다.

동기화 또는 비동기화 가능

이 모든 것은 그들의 내부 실현에 달려 있다.데이터 흐름을 동기화하거나 시간에 따라 발생할 수 있는 이벤트를 만들 수 있는observable를 설정할 수 있습니다.

몇몇 규칙

내가 관찰물은 관례를 따른다고 말한 것을 기억하느냐?좋아, 우리는 우리 자신의 임의의 규칙을 제정할 것이며, 우리의 실현은 이러한 규칙을 따를 것이다.이것은 우리가 우리의 관찰물을 둘러싸고 작은 생태계를 구축하기 때문에 중요한 것이다.
우리 시작합시다.

관찰 가능한 실례는 subscribe 방법이 있을 것이다.

관찰 가능한'공장'은 subscriber 함수를 매개 변수로 사용할 것이다.

subscriber 함수는 observer 대상을 매개 변수로 한다.

observer 대상은 이러한 방법next,error과complete을 실현할 수 있다.

이제 우리 일을 좀 합시다.

코드

공장 기능

function Observable(subscriber) {
  return {
    subscribe: observer => subscriber(observer)
  };
}

// I swear to you, this works.

이것은 내가 상상한 것처럼 그렇게 신기하지 않다.우리가 여기서 본 것은, 공장을 관찰하는 것은 반드시 완성해야 할 일을 당신이subscribe를 호출하는 방식으로 미루는 것입니다.subscriber 함수는 매우 중요한 작용을 하는데 이것은 매우 좋다. 왜냐하면 우리는 그곳에서 우리가 하고 싶은 모든 일을 할 수 있기 때문에 이것은 우리의 관찰치를 유용하게 할 것이다.
지금까지 나는 observer과subscriber의 역할을 잘 설명하지 못했다.나는 네가 그들의 행동을 볼 때 상황이 명랑해지기를 바란다.

용례

가령 우리가 하나의 수조를 관찰할 수 있는 수조로 바꾸고 싶다면.우리 어떻게 하지?
우리가 알고 있는 것을 생각해 보자.

우리는 subscriber 함수 내에서 모든 논리를 완성할 수 있다.

우리는 세 가지 방법next, error과 complete 기대 관찰자 대상을 사용할 수 있다

우리는 관찰자 대상의 방법을 통신 통로로 사용할 수 있다.next 함수는 데이터 원본에서 제공하는 값을 수신합니다.error 우리가 던진 모든 오류를 처리할 것입니다. 이것은 catch 클래스의 Promise 함수와 유사합니다.데이터 원본이 값을 생성할 때, 우리는 complete 방법을 사용할 것이다.
우리의 진열은 관측 가능한 함수까지 다음과 같이 할 수 있다.

function fromArray(arr) {
  return Observable(function(observer) {
    try {
      arr.forEach(value => observer.next(value));
      observer.complete();
    } catch (e) {
      observer.error(e);
    }
  });
}

// This is how we use it

var arrayStream = fromArray([1, 2, 3, 4]);

arrayStream.subscribe({
  next: value => console.log(value),
  error: err => console.error(err),
  complete: () => console.info('Nothing more to give')
});

// And now watch all the action on the console

안전하다

현재 관찰기의 대상은 기본적으로 무법천지의 작은 마을이다. 우리는 각종 이상한 일을 할 수 있다. 예를 들어 next 방법을 사용한 후에 complete 에게 다른 값을 보낼 수 있다.이상적인 상황에서 우리의 관찰치는 우리에게 다음과 같은 보증을 해야 한다.

관찰자의 대상에 대한 방법은 선택할 수 있어야 한다.

complete과error 방법은 unsubscribe 함수를 호출해야 합니다(있다면).

구독을 취소하는 경우 next, complete 또는 error 으로 전화할 수 없습니다.

complete 또는 error 방법이 호출되면 더 많은 값이 나오지 않습니다.

대화형 예

실제로 우리는 우리가 지금 배운 것을 가지고 재미있는 일을 시작할 수 있다.이 예에서 저는 DOM 이벤트에서 관찰할 수 있는 대상을 만들 수 있도록 helper 함수를 만들었습니다.

결론

관찰물은 일종의 강력한 것이다. 약간의 창조력만 있으면 네가 원하는 모든 것을 관찰물로 만들 수 있다.진정으로약속 하나, AJAX 요청 하나, DOM 이벤트 하나, 그룹 하나, 시간 간격...또 다른 관찰할 수 있는...네가 상상할 수 있는 모든 것은 데이터 원본일 수 있고, 관찰할 수 있는 대상에 포장할 수 있다.

기타 출처

Learning Observable By Building Observable

Observables, just powerful functions?

너는 그중에서 이 문장의 두 번째 부분을 볼 수 있다.
읽어주셔서 감사합니다.만약 당신이 이 문장이 매우 유용하다고 생각하고 나의 노력을 지지하고 싶다면, buy me a coffee ☕.