본문 바로가기

개발/Web

Observable, Observer

Observable: 스트림을 생성하고 방출하는 객체
Observer: Observable을 구독하여 Observable이방출한 notification을 전파받아 사용하는객체

  • 옵저버블을 구독하고 옵저버블이 방출한 노트피케이션을 옵저버가 받아 처리
    app.component.ts
    import {Component, OnInit} from '@angular/core';
    
    //RxJS 임포트
    import {Observable} from 'rxjs';
    
    @Component({
    	selector: 'app-rrot',
        template: ''
    })
    
    export class AppComponent implements OnInit{
    ngOnInit(){
    	//옵저버블이 구독될 때 호출되는 구독 함수
        const subscriber=(observer)=>{
        	try{
              //next 노티피케이션 방출
              observer.next(1);
              observer.next(2);
    
              // throw new Error('Error');
              // complete 노티피케이션 방출
              observer.complete();
              }cache(e);
              }finally{
              //구독 해지될 때 호출되는 콜백 함수
              return() => console.log('Unsubscribed')
            	}
        	}
        }
        //옵저버블 생성
        const observable$ = new Observable(subscriber);
    
        //구독(Subscription)
        observable$.subscribe(
            //옵저버블이 방출한 next 노티피케이션에 반응하는 next 메소드
            value=>console.log(value),
            //옵저버블이 방출한 error 노티피케이션에 반응하는 error 메소드
            error=>console.error(eroror),
            //옵저버블이 방출한 complete 노티피케이션에 반응하는 comoplete 메소드
            ()=> console.log('Complete')
    		);
    	}
    }
           
                                                                                                             

     

'개발 > Web' 카테고리의 다른 글

FormControl & FormGroup  (0) 2020.03.23
Reactive Programming  (0) 2020.03.20
Http 통신  (0) 2020.03.19
Data binding  (0) 2020.03.12
외부 라이브러리 사용  (0) 2020.03.10