What is the difference between Observables and Promises in Angular?

In Angular, as soon as we make a promise, the execution takes place, but this is not the case with observables because they are lazy. It means nothing happens until a subscription is made.

PromiseObservable
It emits a single value.It emits multiple values over a period of time.
Not LazyLazy. An observable is not called until we subscribe to the observable.
We can not cancel
it.
We can cancel it by using the unsubscribe() method.
Observable provides operators like map, forEach, filter, reduce, retry, retryWhen etc.

Let’s understand it by an example:

  1. const observable = rxjs.Observable.create(observer => {  
  2.         console.log(‘This is what inside an observable’);  
  3.         observer.next(‘Hello JavaTpoint’);  
  4.         observer.complete();  
  5.       });  
  6.       console.log(‘Before subscribing an Observable’);  
  7.       observable.subscribe((message)=> console.log(message));   

When you run the above Observable, you can see the following messages displayed in the following order:

  1. Before subscribing an Observable  
  2. This is what inside an observable  
  3. Hello JavaTpoint  

Here, you can see that observables are lazy. Observable runs only when someone subscribes to them. That’s why the message “Before subscribing an Observable” is displayed ahead of the message inside the observable.

Now see the example of a Promise:

  1. const promise = new Promise((resolve, reject) => {  
  2.         console.log(‘This is what written inside promise’);  
  3.         resolve(‘Hello JavaTpoint’);  
  4.       });  
  5.       console.log(‘Before calling then method on Promise’);  
  6.       greetingPoster.then(message => console.log(message));   

When you run the above Promise, you will see the messages displayed in the following order:

  1. This is what written inside Promise  
  2. Before calling then method on Promise  
  3. Hello JavaTpoint  

Here, you can see that the message inside Promise is displayed first. This means that the Promise runs first, and then the method is called.

The next difference between them is that Promises are always asynchronous; even when the Promise is immediately resolved. On the other hand, an Observable can be both synchronous and asynchronous.

In the case of the above example, observable is synchronous. Let’s see the case where an observable can be asynchronous:

  1. const observable = rxjs.Observable.create(observer => {  
  2.   setTimeout(()=>{  
  3.       observer.next(‘Hello JavaTpoint’);  
  4.       observer.complete();  
  5.   },3000)  
  6. });  
  7. console.log(‘Before calling subscribe on an Observable’);  
  8. observable.subscribe((data)=> console.log(data));  
  9. console.log(‘After calling subscribe on an Observable’);   

When you run the above observable, you will see the messages in the following order:

  1. Before calling subscribe on an Observable  
  2. After calling subscribe on an Observable  
  3. Hello JavaTpoint