문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판이전 판다음 판 | 이전 판 | ||
| angular:observable_rxjs [2019/03/02 10:38] – [Defining observers] 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(); | ||
| - | </ | ||
| - | |||
| - | ==== Defining observers ==== | ||
| - | 관찰 가능한 통지를 수신하기위한 핸들러는 Observer 인터페이스를 구현합니다. 관찰 가능 객체가 전송할 수있는 세 가지 유형의 통지를 처리하는 콜백 메소드를 정의하는 객체입니다. | ||
| - | |||
| - | ^ Notification Type ^ Description ^ | ||
| - | |next|Required. 전달 된 각 값에 대한 핸들러입니다. 실행이 시작된 후 0 번 이상 호출됩니다.| | ||
| - | |error|Optional. 에러 통지 핸들러. 오류로 인해 관찰 가능한 인스턴스가 실행되지 않습니다.| | ||
| - | |complete|Optional. 실행 완료 통지의 핸들러. 지연된 값은 실행이 완료된 후에도 계속 다음 처리기로 전달 될 수 있습니다.| | ||
| - | |||
| - | 옵저버 객체는 이러한 핸들러의 조합을 정의 할 수 있습니다. 통지 유형에 대한 핸들러를 제공하지 않으면, 옵저 v는 해당 유형의 통지를 + 시합니다. | ||
| - | |||
| - | ==== Subscribing ==== | ||
| - | Observable 인스턴스는 누군가가 구독 할 때만 값을 게시하기 시작합니다. 인스턴스의 subscribe () 메서드를 호출하고 관찰자 객체를 전달하여 구독을 구독합니다. | ||
| - | |||
| - | > | ||
| - | > | ||
| - | > * of (... items) - 인수로 제공된 값을 동 기적으로 전달하는 Observable 인스턴스를 반환합니다. | ||
| - | > * from (iterable) - 인수를 Observable 인스턴스로 변환합니다. 이 방법은 일반적으로 배열을 관찰 가능으로 변환하는 데 사용됩니다. | ||
| - | ===== The RxJS Library ===== | ||