Angular 상세 설명2의 프로그래밍 객체 Observable

前言

RxJs提供的核心是Observable对象，它是一个使用可观察数据序列实现组合异步和事件编程。
跟这个很类似的异步编程模型是Promise，Promise是基于状态变化的异步模型，一旦由等待状态进入成功或失败状态便不能再次修改，当状态变化时订阅者只能够拿到一个值；而Observable是基于序列的异步编程模型，随着序列的变化，订阅者可以持续不断的获取新的值。而且Promise只提供回话机制，并没有更多的操作来支持对结果的复杂处理，而Observable提供了多种多样的操作符，来处理运算结果，以满足复杂的应用逻辑。

在实际编程中，我们主要与三个对象打交道：Observable、observer、Subscription：

以一个元素的click事件为例看看如何使用Observable：

var clickStream = new Rx.Observable(observer => {
var handle = evt => observer.next(evt);
element.addEventListener('click', handle);
return () => element.removeEventListener('click', handle);
});
subscription = clickStream.subscribe(evt => {
console.log('onNext: ')} + evt.id);
}, err => {
console.error('onError');
}, () => {
console.log('onComplete');
});
setTimeout(() => {
subscription.unsubscribe();
}, 1000);

만약 각 이벤트가 이렇게 포장되어야 한다면 너무 번거롭지 않을까요? 따라서 RxJs는 이벤트를 연결하는 데 편리한 함수를 제공합니다: Observable.fromEvent.

일반적인 연결 연산자:concat, merge, combineLates 등

프로젝션 연산:map, flatMap, flatMap은 중요하게 설명할 필요가 있습니다.

필터링:filter, distinctUltilChanges

연산자 분류:Operators by Categories

에러 처리:catch, retry, finally

감소:debounce, throttle, sample, pausable

감소:buffer, bufferWithCount, bufferWithTime

Observable 연산자를 완벽히 이해하려면 시퀀스 그래프를 이해해야 합니다:

화살표는 시간에 따라 변화하는 시퀀스를 나타냅니다. 예를 들어, 요소에 마우스를 지속적으로 클릭하면 원은 시퀀스가 외부에 미치는 영향을 나타냅니다. 예를 들어, 요소를 클릭할 때마다 이벤트가 발생하여 이벤트 콜백이 트리거되며, 원 안의 숫자는 외부로 발신하는 정보를 나타냅니다. 예를 들어, 각 이벤트의 트리거링에는 이벤트 객체가 있으며, 이는 이번 작업에 대한 일련의 정보를 나타냅니다.

Observable를 통해 복잡한 로직을 유연하게 처리하려면, 제공하는 연산자를 사용해야 합니다. 저는 연산자를 두 가지 유형으로 나눕니다. 단일 시퀀스 연산자와 복합 시퀀스 연산자입니다. 단일 시퀀스 연산자는 하나의 시퀀스에 대한 작업 계산을 의미하며, 복합 시퀀스 연산자는 두 개나 많은 시퀀스를 처리하는 연산자로, 복합 시퀀스 연산자는 조금 더 이해하기 어렵습니다.

먼저 단일 시퀀스 작업을 보여드리겠습니다. 예를 들어 map 작업을 사용해 보겠습니다:

map 작업은 시퀀스에서 각 번호에 대해 발신하는 정보를 변환하는 것입니다. 예를 들어, 위의 map은 각 발신 값을 열 개로 곱합니다. 따라서 구독자가 구독한 후에 얻는 구독 값은 더 이상 원래의123그 대신 변환된10 20 30. 시퀀스 그래프를 통해 Observable의 계산을 더 쉽게 이해할 수 있습니다.

아래에서 복합 시퀀스 작업을 보여드리겠습니다. 예를 들어 merge를 사용해 보겠습니다.

merge操作의 목적은 두 개의 독립된 시퀀스를 하나의 시퀀스로 결합하는 것입니다. 원래 시퀀스1시간이 흐를수록,100ms에서 a를 발사하고, 이 때200ms에서 b를 발사합니다300ms에서 c를 발사하고, 이의 구독자는400ms에서 abc 세 가지 값을 받습니다；시퀀스2이 때150ms에서 d를 발사합니다250ms에서 e를 발사합니다350ms에서 f를 발사하고, 이의 구독자는400ms 내에 def 세 가지 값을 받습니다. merge 후 새로운 시퀀스는400ms 내에 abcdef를 받습니다(주의, 순서를 유지하세요).

일반적인 연산자 이해

Observable.range：특정 개수의 값을 발사하는 시퀀스

Observable.toArray: 시퀀스가 완료될 때 모든 발사 값을 배열로 변환합니다

Observable.flatMap: 원래 시퀀스 스트림의 요소를 새로운 시퀀스 스트림으로 변환하고, 이 새로운 시퀀스 스트림을 원래 시퀀스의 요소 위치에 merge합니다

Observable.startWith: Observable 시퀀스의 첫 번째 값을 설정합니다

Observable.combineLatest: promiseAll과 유사하게, 모든 시퀀스가 결과를 가지면 실행됩니다

Observable.scan: 시퀀스에서 각 발사의 값을 수집할 수 있으며, reduce와 유사합니다. reduce는 시퀀스의 모든 값을 수집하여 시퀀스가 완료될 때 최종 값을 발사합니다

Observable.sample: 지속적인 시퀀스에서 일정량의 샘플을 추출합니다

Observable.merge：여러 시퀀스를 하나로 합치고 OR를 사용할 수 있습니다

Observable.timestamp: 각 발사值的 발사 시간을 얻을 수 있습니다

Observable.distinctUntilChanged(compare, selector): selector는 비교에 사용되는 키를 추출하며, compare는 두 키를 비교합니다

Observable.takeWhile() 파라미터가 false 일 때 데이터 발사를 중지합니다

정리

이 글의 모든 내용이 끝납니다. 이 글의 내용이 여러분의 학습이나 업무에 도움이 되길 바랍니다. 의문이 있으시면 댓글을 통해 교류해 주세요.