5분 동안 관찰된 RxJS 규명

대다수의 사람들은 나 자신을 포함해서 RxJS 응용 프로그램을 개발하기 시작했을 때 처음으로 Angular 개의 관찰 대상을 만났다.Observables는 프레임의 기본 요소이다.그것들을 사용하지 않으면 너는 너무 많은 일을 할 수 없다.예를 들어, HTTP requests 결과를 관찰 가능한 결과로 반환합니다.이렇게 하면 다른 용도로 사용하지 않고 Promises의 또 다른 기이한 변체일 뿐이라고 생각할 수 있습니다.만약 이렇게 한다면 때때로 이상한 일이 발생할 수 있습니다. HTTP가 여러 번 실행을 요청하거나, 실행해야 할 때 실행된 적이 없거나, 일이 무작위 순서로 발생합니다.이 강좌에서 저는 관찰할 수 있는 대상이 어떻게 일을 하는지 이해하고 각도 개발을 더욱 효율적이고 쉽게 하는 방법을 보여 드리겠습니다.

승낙

관점에서 HTTP 요청은 좋은 출발점이자 오도이다.그것들의 API는 결과와 오류를 탐지하는 데 사용되는 성공과 실패 리셋을 제공하기 때문에 약간 비슷하다.

const observable = api.callWithObservable();
const promise = api.callWithPromise();

observable.subscribe(
  result => { /* on success */ },
  error => { /* on error */ }
);

promise.then(
  result => { /* on success */ },
  error => { /* on error */ }
);

우리는 함수 호출을 통해 작업을 시작하고, 되돌아오는 관찰/약속은 잠시 후에 결과/오류를 보냅니다.비슷한 점은 여기서부터 시작하고 끝난다.다른 모든 것, 집행, 결과 수량, 행위는 다르다.

여러 결과

한 번만 결과를 내놓겠다고 약속했지만 시간이 지날수록 관찰 대상은 여러 개의 값을 낼 수 있다.

const observable = Rx.Observable.interval(1000).take(5);

observable.subscribe(
  result => console.log(result),
  error => { /* on error */ },
  () => { /* on complete */ }
);

상기 예시에서 관찰 대상은 1초 지연된 값 0, 1, 2, 3, 4를 보내고 완성할 수 있다.subscribe 방법은 다섯 번 호출되었는데, 그 값을 제외하고, 우리는 흐름의 끝을 측정할 수 있습니다.완료되면subscribe 함수에서 세 번째 리셋을 호출합니다.그런 다음 관찰 가능 객체는 값을 보내지 않습니다.
시간의 추이에 따라 값을 보내면 관찰할 수 있는 값이 흐름과 매우 비슷하다(예를 들어 Node.js에서).두 개의 단독 흐름이나 버퍼를 합치는 것과 같은 방법도 있을 수 있습니다.

동기화 실행

약속을 해석한 후, 비동기적으로 then 리셋을 호출합니다.Javascript 이벤트 순환 내에서 다음 주기에 리셋이 실행됩니다.반대로 값을 전송한 후 관찰 대상의 구독이 동기화됩니다.

let promiseResult;
Promise.resolve(15).then(val => { 
  promiseResult = val;
  console.log('resolved promise', val);
});
console.log('result promise', promiseResult); // result promise undefined

let observableResult;
Rx.Observable.of(15).subscribe(val => {
  observableResult = val;
  console.log('resolved observable', val);
});
console.log('result observable', observableResult); // result observable 15

이 예시를 실행하면, 컨트롤러로 출력할 때, then 리셋에서 분배된 값이 정의되지 않은 것을 볼 수 있습니다.로그다른 한편,subscribe 리셋의 값은 정의되지 않고 컨트롤러에서 출력됩니다.로그
다음 방법을 호출할 때, 이 동기화 실행도 주제에 적용된다.

const subject = new Rx.Subject();

let observableResult;
subject.subscribe(val => {
  observableResult = val;
  console.log('resolved observable', val);
});

subject.next(15);
console.log('result observable', observableResult); // result observable 15

모든 구독을 동기화하기 때문에 분석된 로그는 컨트롤러의 결과 앞에 나타납니다.

여러 번 실행

당신은 관찰할 수 있는 물건을 여러 번 구독할 때 일이 이상하게 변하는 것을 경험해 본 적이 있습니까?예를 들어 여러 번 실행, 예를 들어 HTTP 요청?
이것은subscribe 방법을 호출할 때 관찰 대상을 위한 단독 실행을 만들기 때문입니다.이 실행이 HTTP 요청으로 구성되면 끝점이 다시 호출됩니다.

const observable = Rx.Observable.interval(1000).take(5);

observable
  .subscribe(x => console.log('A next ' + x)); // create an execution

setTimeout(() => {
  observable
    .subscribe(x => console.log('B next ' + x)); // create an execution
}, 2000);

// A next 0
// A next 1
// B next 0
// A next 2
// B next 1
// A next 3

우리는 2초 후에 도착한 두 번째 구독 (B) 이 첫 번째 구독과 같은 값을 받기를 기대한다.그러나 실제로 B는 처음부터 값을 받았는데 2초만 지연되었다.이 배후의 원인은 모든subscribe 방법이 새로운 실행을 만들고 이전 방법과 다른 관찰 실행을 다시 시작하기 때문이다.
같은 약속을 위해 여러 개의 then 방법을 작성할 때, 약속은 다시 시작하지 않습니다.그들은 비동기적으로 실행하고 같은 값을 얻는다.관찰할 수 있는 대상과 같은 행동을 만들기 위해서, 우리는 모든 구독자에게 같은 실행을 제공하는 공유 조작부호를 적용해야 한다.백그라운드에서 조작자는 테마를 만들고 값을 이 테마에 전달합니다.

수조 방법

Promises는 then 방법으로만 되돌아오는 값을 바꾸지만, Observable에는 여러 가지 방법이 있습니다.이 방법들의 명칭은 수조 방법과 매우 비슷하다.

promise
  .then(value => value + 5)
  .then(value => Promise.resolve(9));

observable.pipe(
  map(value => value + 5),
  flatMap(value => Rx.Observable.of(9)),
  filter(value => value > 5)
);

then 방법에서 새 값이나 약속을 되돌릴 수 있습니다.그 작용은 같다.다음 then 방법은 이전에 되돌아온 값을 가져옵니다.관측 가능한 항목에 대해 우리는 동기화(map)와 비동기화(flatMap) 변환을 분리해야 한다.관찰할 수 있는 대상도 많은 수조 방법(필터링, 감소, 연결, 포함 등)과 실용 프로그램 라이브러리의 수조 방법(Lodash:pluck,groupBy 등)이 있다

아니면 모르겠어요?

내가 관찰물을 배웠을 때 the RxMarbles site 그것들을 매우 뚜렷하게 만들었다.RxMarbles는 구성 요소의 동작을 관찰할 수 있는 타임라인을 설명하는 그래픽 표현입니다.서로 다른 색깔은 서로 다른 출처에서 온 서로 다른 사건과 그들의 행동을 의미한다. 예를 들어 우리가 그것들을 합병할 때.

총결산

약속을 통해 관찰할 수 있는 것을 이해할 수 있지만, 그 차이점을 알아야 한다.

시간에 따른 여러 값

동기식 콜백

여러 번 수행

클래스 그룹 방법

상술한 것들이 관찰물에 대한 오해와 모호한 부분을 비교적 분명히 하기 바란다.더 공부하기 위해서 저는 blog of André Staltz(RxJS의 핵심 공헌자)를 읽고 그의 tutorials on Egghead를 들을 것을 건의합니다.