Promise vs Observable

Promise and Observables are two popular ways of handling asynchronous responses in JavaScript (another way of handling this is using callbacks. It is still used in legacy code but not preferred anymore).

When you make an asynchronous call, Javascript asks a web worker to handle those requests to the backend. Other tasks in the main thread will continue without waiting for the backend response. So how do you handle the data once it is returned from the server? This is where the promises and observables come into the picture.

Before we proceed further, you need to understand the pull and push models based on how data is sent and received. There are two objects in this process. Publisher who sends the data and Consumer who requests the data.

Pull Model: In this model, the data transfer happens whenever the consumer requires it. Popular example of this model are functions. A function returns data only when you call it explicitly.

Push Model: In this model, the consumer can make the request for data but the consumer has no way of knowing when the data will be returned. Popular example of this model is Promise which is discussed below.

Promise :

As mentioned, A promise follows the push model. A promise is an object that promises that they will have a value in the near future which can be either a success or an error. You can tell the promise what it should do when that value is returned using, .then() and .catch(). The following code illustrates the use of a promise.

function getPromiseData(name){
   return new Promise(function(resolve, reject){
     if(name == "raghu"){
       resolve("Hello Raghu!");
     }
     else{
      reject("Invalid name!");
     }
   });
}
getPromiseData("raghu")
.then(function(response){
    console.log(response); //If data return is success
})
.catch(function(error){
    console.log(error); //If an error happens
})

In the above example, a promise is created using the promise constructor inside the function. Then while calling the function, we setup .then() and .catch() functions to do the data-handling.

Observable:

An Observable is an object that uses the pull model of the data transfer. It means that consumer will have to call for that data before he handles it. This calling of data is called subscription.

One primary difference between the function call and an observable subscription is that the function returns a data only once, while an observable can return a stream of data. This can be illustrated in below example.

var observableData = Rx.Observable.create((observer: any) => {
try{
    observer.next(“Hello World!”);
    observer.next(“This is observable”);
}
catch(error){
    observer.error(error);
}
observableData.subscribe((data) =>{
     console.log(data); //Prints both lines of data to the screen.
}

As you can see from the above example, you need to subscribe to the data in order to access it. Some other key differences between a promise and an observable are discussed below.

Promise vs Observables

1. A subscription can return multiple streams of data while a promise can return only one stream of data.
2. Observables are lazy i.e., we have to subscribe to it while a promise is executed immediately after the data is returned.
3. Observables are cancellable while promises are not. You can cancel an observable using “unsubscribe()” method.
4. RxJs library provides many operators on observables like map, foreach, filter etc., while promises do not.

Hope you have enjoyed the reading.