Description
The RxJS is currently by far the hottest JavaScript library which is widely used especially in Angular single page applications. When you are first introduced to the library and the notion of observable you may hear that the latter is like a Promise but with multiple values or an asynchronous collection of data. In fact, the aforementioned definitions are not exact and I will cover the main differences in the article.
Goal
The main aim of today?s article is to get familiar with four major differences between Promise and Observable objects. I believe that there?s is no point in learning the differences by heart without a deep understanding, therefore I provide appropriate examples.
Eager vs Lazy
The first difference is that a Promise is eager, whereas an Observable is lazy.
Let?s start with the following Promise
The Promise in the above example is eager, since the callback function provided to a Promise constructor function is executed immediatelly. If you execute the code, you will see that the message from within the Promise is displayed before calling a then method on the Promise object.
On the contrary, an Observable is lazy.
If you create an Observable, you provide a callback function that will be called upon invoking subscribe method on the Observable object. As you can see, the message ?Before calling subscribe?? will appear before the console.log from within the Observable.
You may compare the above examples to a situation in which you arrive at the hotel and you see a greeting poster (Promise-already prepared and available to read by calling then method), whereas an Observable is a greeting lady who greets each new guest when he arrives (calling subscribe method on an Observable).
Observable can be synchronous
Promise is always asynchronous. Even if it?s immediatelly resolved.
The message from within then method callback function will be the last one even though the Promise is resolved without a delay, since the call is added to the microtasks queue which will be processed after the current macrotask?s completion.
However, an Observable can be synchronous.
In the above example, the order of messages is kept.
On the other hand, an Observable can also be asynchronous.
Now the notifications for an observer are delayed, therefore the Observable is asynchronous and both next and complete methods are called after ?After calling subscribe?? console.log.
Observable can emit multiple values
The next difference is that a Promise object may provide only a single value. It can be an array but it?s still a single object. On the contrary, an Observable may emit multiple values over time.
In the above example, the Observable provides a new notification every 2 seconds. The subscription is cancelled after 8s.
As mentioned above, a Promise is a greeting poster (it?s done and you can read its message), whereas an Observable is a greeting person (she has to perform the same activity every time a new guest arrives).
Operators rocks!
The most astonishing feature of the RxJS library is a great number of operators that can be applied to Observables in order to get a new tailored stream.
For example, you can get a new stream based on the Observable from the previous paragraph which adds the current date to each notification with the aid of map operator.
There is no such equivalent for a Promise object.
Remarks
In a nutshell, the main differences between a Promise and an Observable are as follows:
- a Promise is eager, whereas an Observable is lazy,
- a Promise is always asynchronous, while an Observable can be either synchronous or asynchronous,
- a Promise can provide a single value, whereas an Observable is a stream of values (from 0 to multiple values),
- you can apply RxJS operators to an Observable to get a new tailored stream.
Like, love, hate, clap!
