RxJS에서 Observable은 관찰자를 생성하고 이를 값이 예상되는 소스에 연결하는 데 사용되는 함수입니다. 예를 들어, 클릭, DOM 요소의 마우스 이벤트 또는 Http 요청 등이 관찰 가능의 예입니다.
즉, 관찰자는 Observable과 상호작용할 때 호출되는 콜백 함수를 가진 객체라고 말할 수 있습니다. 예를 들어, 소스는 버튼 클릭과 같은 상호작용을 했습니다. HTTP 요청 등
Observable은 여러 값의 게으른 푸시 컬렉션으로 정의될 수도 있습니다. Observable이 값을 푸시하는 데 어떻게 사용되는지 이해하기 위해 간단한 예를 살펴보겠습니다.
다음 예를 참조하세요.
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); 위의 예에는 구독 시 값 10, 20, 30을 즉시 동기적으로 푸시하는 Observable이 있지만 구독 메서드가 호출된 이후 1초 후에 값 40이 푸시됩니다.
Observable을 호출하고 위의 값을 보려면 이를 구독해야 합니다. 다음 예를 참조하세요.
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); console.log('These are the values just before subscribe'); observable.subscribe({ next(x) { console.log('We have got value ' + x); }, error(err) { console.error('something wrong occurred: ' + err); }, complete() { console.log('Done successfully'); } }); console.log('This value is just after subscribe'); 산출:
위 프로그램을 실행하면 콘솔에 다음과 같은 결과가 표시됩니다.
Observable은 함수의 일반화입니다.
우리는 Observable이 클릭, DOM 요소의 마우스 이벤트 또는 Http 요청 등의 역할을 하는 함수라는 것을 알고 있습니다. 그러나 Observable은 EventEmitters와 같지 않으며 여러 값에 대한 Promise와도 다릅니다. 경우에 따라 Observable은 EventEmitters처럼 작동할 수 있습니다. 즉, RxJS Subject를 사용하여 멀티캐스트될 때 Observable은 EventEmitters처럼 작동하지 않습니다.
Observable은 인수가 없는 함수와 비슷하지만 여러 값을 허용하도록 일반화합니다.
이를 명확하게 이해하기 위해 예를 살펴보겠습니다.
함수의 간단한 예:
function foo() { console.log('Hello World!'); return 123; } const x = foo.call(); // same as foo() console.log(x); const y = foo.call(); // same as foo() console.log(y); 산출:
다음과 같은 출력이 표시됩니다.
'Hello World!' 123 'Hello World!' 123
Observable을 사용하여 동일한 예제를 작성해 보겠습니다.
import { Observable } from 'rxjs'; const foo = new Observable(subscriber => { console.log('Hello World!'); subscriber.next(123); }); foo.subscribe(x => { console.log(x); }); foo.subscribe(y => { console.log(y); }); 산출:
위와 동일한 출력이 표시됩니다.
함수와 Observable 모두 게으른 계산이기 때문에 이를 볼 수 있습니다. 함수를 호출하지 않으면 console.log('Hello World!')가 발생하지 않습니다. 또한 Observable을 사용하면 구독으로 '호출'하지 않으면 console.log('Hello World!')가 발생하지 않습니다.
개발자 모드를 닫는 방법
Observable 작업
Observable에는 세 가지 단계가 있습니다.
- 관찰 가능 항목 생성
- Observable 구독
- 관찰 가능 항목 실행
관찰 가능 항목 생성
Observable을 생성하는 방법에는 두 가지가 있습니다:
- Observable 생성자 메서드 사용
- Observable create() 메소드 사용
Observable 생성자 메서드 사용
Observable 생성자 메서드를 사용하여 Observable을 생성하고 Observable 내부에서 사용할 수 있는 subscriber.next 메서드를 사용하여 'This is my first Observable'이라는 메시지를 추가해 보겠습니다.
testrx.js 파일:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 다음과 같이 Observable.create() 메서드를 사용하여 Observable을 생성할 수도 있습니다.
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Observable 구독
Observable을 구독하는 것은 함수를 호출하는 것과 같습니다. 데이터가 전달될 콜백을 제공합니다.
다음 구문을 사용하여 Observable을 구독할 수 있습니다:
통사론:
observable.subscribe(x => console.log(x));
구독에 대한 위의 예를 참조하세요.
testrx.js 파일:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); 산출:
관찰 가능 항목 실행
Observable은 구독될 때 실행됩니다. 일반적으로 관찰자에게는 알림을 받는 세 가지 방법이 있습니다.
다음(): 이 방법은 숫자, 문자열, 객체 등과 같은 값을 보내는 데 사용됩니다.
완벽한(): 이 메서드는 어떤 값도 보내지 않습니다. Observable이 완료되었음을 나타냅니다.
오류(): 이 방법은 오류가 있는 경우 이를 알리는 데 사용됩니다.
세 가지 알림이 모두 포함된 Observable을 생성하고 해당 예제를 실행하는 예를 살펴보겠습니다.
testrx.js 파일:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { try { subscriber.next('This is my first Observable'); subscriber.next('Testing Observable'); subscriber.complete(); } catch(e){ subscriber.error(e); } } ); observer.subscribe(x => console.log(x), (e)=>console.log(e), ()=>console.log('Observable is completed now.')); error 메소드는 오류가 있는 경우에만 호출됩니다. 위의 코드를 실행하면 콘솔에 다음과 같은 출력이 표시됩니다.
산출:
