Promise와 Observable 객체의 차이

# Promise 와 Observable 공통점

둘다 async 비동기 함수 호출을 할 때 사용한다.

 

 - promise 비동기 함수 호출

const promise = new Promise(resolve => {

  setTimeout(() => {

    resolve("Hello from a Promise!");

  }, 2000);

});

 

promise.then(value => console.log(value));             // 비동기적인 시점에 약속된 값을 한번 반환하고 끝

 

 - Observable 비동기 함수 호출

const observable = new Observable(observer => {

  setTimeout(() => {

    observer.next('Hello from a Observable!');

  }, 2000);

});

 

next : 최신(다음)값을 전송하는 이벤트

error : Observable이 값을 배출하다 에러가 발생하면 error를 배출하고 종료시키는 이벤트

 

complete : 성공적으로 이벤트 시퀀스를 종료시키는 이벤트. Observable이 더 이상 값을 배출하지 않음

 

observable.subscribe(value => console.log(value)); // 비동기적인 시점에 값이 change 될 때마다 지속적으로 호출

 

 

 

# Promise 와 Observable 차이점

Promise와 Observable 비슷한 듯 하나, 언어적으로 보면 차이점을 느낄 수 있다.

Promise는 단어 뜻과 같이, 일종의 약속 객체이다.

"미래의 어떤 시점에 특정형태의 결과를 제공"하겠다라는 것을 구현해 놓은 객체라고 생각하면 된다.

한번에 하나의 값에 대해서만 async 비동기 처리를 한다.

한번 완료된 async한 값을 resolve하고나면 더 이상 사용이 불가능하고 취소할 수가 없다.

그래서, Promise 객체를 사용(호출)할 때 사용되는 함수명도, then()이다.

 

Observable은 단어 뜻과 같이, 지속적으로 관찰가능한 객체라는 의미다.

"변경될 때마다, 변경된 값을 비동기적으로 제공"하겠다는 것을 구현해 놓은 객체라고 생각하면 된다.

다수의 asynchronous 값들을 emit할 수 있다. 즉 다수의 값, 이벤트 스트림을 다루기 위해 사용된다.

Observable 객체를 사용(호출)할 때 사용되는 함수명에서 알 수 있듯이, subscribe() : 구독을 의미한다.

주기적으로 값의 변경값을 받아보겠다는 의미이다. 더이상 구독이 필요 없을 때, unSubscribe()를 호출하는 것도 중요하겠다.

기본적으로 http.get() 요청은 Observable로 떨어진다.

 

이때 사용되는 객체가 Subscription 객체로써, Observable.subscribe()를 담고 있다가. 나중에 Subscription.unsubscribe()를 호출한다.

unsubscribe 함수를 사용하여 구독을 언제든지 취소할 수 있다.

 

진짜 중요한 부분은 rx/js 오퍼레이터를 제공한다는 것이다. map, filter, switchMap, combineLatest 오퍼레이터들을 pipe로 사용할 수 있고 subscribe하기전에 값을 transform할 수도 있다.

pipe란? 일종의 배관을 의미하며, subscribe()로 변경된 값이 나가기 전에, pipe 함수내에 정의된 함수대로 전처리를 진행시켜줄 수 있는 것을 의미한다. 

map( (entity) => { entity... } : 결과 리스트의 전체값에 대하여, 일괄적으로 특정 작업이 필요할 때, 사용(Transform operator)

tap((entity) => console.log(entity)) : 값에는 전혀 영향을 주지 않고, 전체값에 대하여, 특정 외부 처리를 하고 싶은 경우 사용(Util Operator)

filter( (entity) => { entity.attr === 1} : 결과 리스트의 특정 값만 Filtering 하고 싶을 때 사용

combineLatest : 두개의 Observable 객체를 묶어서, 둘중 하나라도 change 이벤트가 발생되었을 때, 호출하겠다는 의미..? 아직 잘 모르겠음

switchMap : 아직 잘 모르겠음.

 

 

 

 

 

# toPromise() 함수

rxjs 의 Observable 객체를 toPromise() 함수를 통해, Observable 객체의 특징을 버리고, Promise()객체 처럼 사용이 가능하다. 굳이 구독하면서, 결과값을 계속 subscribe할 필요가 없다면, Promise로 변환하여 한번의 값만 처리한다.

 

# Subject 객체와 asObservable() 함수

Subject 객체란 State 관리 라이브러리의 State처럼 상태를 저장하는 하나의 광역변수와 같이 상태를 저장하기 위한 용도..정도 생각하면 되겠다.

해당 Subject 객체를 대상으로 지속적으로 변경값을 받고 싶다면, Subject객체.asObservable() 함수를 호출하여, 해당 객체 전용 Observable 함수를 만들고, 해당 객체를 구독함으로써, 변경값을 전달 받을 수 있다. 

Subject 객체값을 변경할 때는 Subject 객체값을 직접 변경하고, 그 변경된 정보는 Observable 객체를 구독하고 있는 파트로 전파된다.

 

# 핵심 요약

Observable이 Promise보다 더 큰 기능을 가진다.

Observable은 다발성이고, Promise는 단발성이다.

await는 Promise와 짝꿍이다. Observable에 await를 쓰고 있으면, Observable을 toPromise() 함수로 Promise로 제약시킨 이후에 사용가능하다.

 

출처: https://moaimoai.tistory.com/309 [모아이석상의 컴퓨터 이야기]