본문 바로가기

DevOps/Angular

Promise 와 Observable 차이점

Angular를 처음 접했을 때 Observable을 보고 너무 어렵게 느껴졌다.

물론 지금도 어렵지만... stackoverflow를 참고하여 작성한다.

 

공통점은?

둘다 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);
});

observable.subscribe(value => console.log(value));

 

 

차이점은?

Promise는 하나의 값에 대해 resolve하거나 reject한다. 그리고 한번에 하나의 값에 대해서만 async 비동기 처리를 한다.

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

 

Observable은 그러한 점을 개선했는데 다수의 asynchronous 값들을 emit할 수 있다. 즉 다수의 값, 이벤트 스트림을 다루기 위해 사용된다.

많은 task나 value의 배열을 처리할 때, 매시간마다 automatically 들어오는 값들을 처리하고 싶을 때 사용한다. 언제든지 값을 push할 수 있고 subscribers는 최신값들을 자동적으로 받을 수 있다.

Observables는 인풋 값이 바뀌거나 특정시간마다 반복될 때, 모든 자식 컴포넌트에게 값을 전달하고 싶을 때, 웹 소켓이 notifications을 push하고 싶을 때 사용한다. unsubscribe 함수를 사용하여 구독을 언제든지 취소할 수 있다.

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

Promise와 Observable 차이점