Difference between promises and observables

Introduction 

As we have studied about synchronous and synchronous process in the previous post. There are some major differences between promise and observable. They can call callback functions when the operations are done. Promises have only one pipeline. Both handle the asynchronous calls and events only. In Angular, we can either use Promise or Observable for handling asynchronous data requests. Both get and post method of Http and HttpClient actually returns observable. We can convert this promise using toPromise() method.

What is a promise?

It is an object which will generate a single value in the future. It can enter in any of the three states defined: Fulfilled, rejected and pending. Promises are eager to fetch. It means it will start doing its task as soon as promise constructor is called. We can write callbacks to handle fulfilled state or reason for the rejected state. Promises are immutable in nature. Once it is entered fulfilled or rejected state(settled state), it's state and value can never be changed. Promise can't be canceled.
How it works?
A promise can enter in any of the three stages:
  • Fulfilled: It is kind of a success response. After this, the onFulfilled() method will be called. (Resolve())
  • Rejected: It seems to be kind of a failure response. onRejected() will be called.(Reject())
  • Pending: Not yet resolved or rejected. It is in the pending state.
A promise is an object which will supply the .then() method. Its syntax is as follows.
promise.then(
   onResolved?: Function,
   onRejcted?: Function
)=>Promise

What is an observable?

Observables are lazy. These are push collections of multiple values. It acts as a support between publishers and subscribers. It can deliver multiple values of different types which include literals, events, etc. Your application can subscribe to these observables and unsubscribe when done. 
  • Observables are declarative - If you define a function for publishing values, it will not be executed until it is subscribed.
  • Observables offer promises plus much more advantages. Observables provide many powerful operators in Angular like map, foreach, filter, reduce, retry, etc.
  • Can be canceled using the unsubscribe() method.
Defining observers
A handler for receiving observable notifications implements the observer interface. An observer is an object that defines callback methods to handle any three kinds of notifications that an observable can send.
  • next - Required. It handles each delivered value. Can be called zero or multiple times after execution takes place.
  • error - Optional. It handles the error notification. If the error occurs, it will halt the execution of that specified observable instance.
  • completes - Optional. Handles the execution-complete notification. In case of delayed values, values will be delivered to the next handler after execution is complete.


Subscribing
You need to subscribe to the publishing values using subscribe() method.

const myObservable = of(11, 22, 33);

 // Create observer object
const myObserver = {
  next: x => console.log('Observer value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer completed'),
};
 
// Execute with the observer object
myObservable.subscribe(myObserver);
//Will print as follow:
// Observer value: 1
// Observer value: 2
// Observer value: 3
// Observer completed

Differences

Single value v/s multiple values

  • Promises actually emit single value whereas an observable emits multiple values. A promise can manage a single response from a request whereas an observable can manage multiple responses from a single request. In the case of multiple responses or multi-stream of data, we should use observable rather than promise. 
  • Where we have to handle multiple callbacks for every response, observables are preferred.
const promiseExample = new Promise((resolve) => {
    resolve(11);
    resolve(1);
});
promiseExample.then(value => console.log(value));
//Will print only 11. 

The value passed again to the promise will not be resolved. It ignores further calls. The promise always resolves with the first value passed to the resolve method.


  • Observable allow us to resolve multiple values. 
const observableExample = new Observable((observer) => {
    observer.next(11);
    observer.next(1);
});
observableExample.subscribe(value => console.log(value));
//Will print only 11 and 1 both.

Lazy v/s eager

  • Promises are eager whereas observables are lazy. Promises immediately called a function passed to it as soon as its constructor is invoked.
  • Observables are lazy as a function inside it will not execute until it is subscribed.
const promise = new Promise(() => {
    console.log('Hello Promise!');
});
//Hello Promise! will be printed immediately.

Whereas in case of an observable, it will not be called until someone subscribe to it.

const obervable = new observable(() => {
    console.log('Hello Observable!');
});
//Hello Observable! will not be printed immediately. We need to subscribe it.

Subscribing the observable in the following way.
observable.subscribe();
// just now "Hello Observable!" gets printed.

Comments