angular:observable_rxjs
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판이전 판다음 판 | 이전 판 | ||
| angular:observable_rxjs [2019/03/02 10:29] – [Observable] taekgu | angular:observable_rxjs [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1 | ||
|---|---|---|---|
| 줄 1: | 줄 1: | ||
| ====== Observable & RxJS ====== | ====== Observable & RxJS ====== | ||
| - | + | - [[angular: | |
| + | - [[angular: | ||
| + | - [[angular: | ||
| + | - [[angular: | ||
| + | - [[angular: | ||
| ===== Observable ===== | ===== Observable ===== | ||
| - | Observables는 애플리케이션의 게시자와 구독자간에 메시지 전달을 지원합니다. Observables는 이벤트 처리, 비동기 프로그래밍 및 여러 값 처리를위한 다른 기술보다 중요한 이점을 제공합니다. | ||
| - | Observables는 선언적입니다. 즉, 값을 게시하기위한 함수를 정의하지만 소비자가이 값을 구독 할 때까지 실행되지 않습니다. 그런 다음 구독 된 소비자는 함수가 완료되거나 구독을 취소 할 때까지 알림을받습니다. | + | ===== The RxJS Library ===== |
| - | 관찰 가능 항목은 컨텍스트에 따라 유형, 리터럴, 메시지 또는 이벤트의 여러 값을 전달할 수 있습니다. 값을 수신하기위한 API는 값이 동 기적으로 또는 비동기 적으로 전달되는지 여부에 관계없이 동일합니다. 설정 및 해체 논리는 모두 관찰 가능 항목에 의해 처리되므로 응용 프로그램 코드는 값을 소비하기 위해 가입 할 필요가없고, | + | ===== Observables in Angular ===== |
| - | 이러한 이점 때문에 Observable은 Angular 내에서 광범위하게 사용되며 앱 개발에도 권장됩니다. | + | ===== Practical observable usage ===== |
| - | ==== Basic usage and terms ==== | + | ===== Observables compared to other techniques ===== |
| - | 게시자는 가입자 함수를 정의하는 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 (' | ||
| - | watchId = navigator.geolocation.watchPosition(next, | ||
| - | } else { | ||
| - | error(' | ||
| - | } | ||
| - | |||
| - | // When the consumer unsubscribes, | ||
| - | return {unsubscribe() { navigator.geolocation.clearWatch(watchId); | ||
| - | }); | ||
| - | |||
| - | // Call subscribe() to start listening for updates. | ||
| - | const locationsSubscription = locations.subscribe({ | ||
| - | next(position) { console.log(' | ||
| - | error(msg) { console.log(' | ||
| - | }); | ||
| - | |||
| - | // Stop listening for location after 10 seconds | ||
| - | setTimeout(() => { locationsSubscription.unsubscribe(); | ||
| - | </ | ||
| - | |||
| - | ===== The RxJS Library ===== | ||
angular/observable_rxjs.1551522584.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)