Angular Regime Series: Difference Between Promise and Observable
Understanding the conceptual differences helps us decide what is the best place to use it.
In this article, we will see some use cases and understand the difference between these two methods.
Introduction
When you start building Single Page Applications with Angular. One of the very first things you get acquainted with is Observables. Now, once you try to get a hold of what it actually is, you might have got a notion that Observables are just another form of Promises, just to wrap your mind around it. But the matter of fact is there are some groundbreaking differences which separates them both. Let’s get started shall we!
1- Abort or Cancel Operations
When we are making Asynchronous or synchronous calls, there might be some instances where we would want the call to be canceled in case a certain condition is met or a certain value is emitted. Both Promises and Observables are capable of making Asynchronous calls but when it comes to canceling, Promises fall back in line. See Promises are only good at returning a response either resolved or rejected. Promises are not capable of canceling the call whereas Observable can.
One of the key features of Observables is its ability to cancel the operations. When we subscribe to an Observable, It returns a subscription object which can be used to cancel it. ReactiveX documentation explains the primary purpose of using the Subscription.
Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution.
Try changing the time of unsubscribing from 600 to 400 which is less than subscribe. Now observe that the Observable completed message doesn’t appear as the observable got canceled before it could complete.
Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn't so far.
2- Lazy & Eager
Promises are Eagerly called and Observables are Lazy. That is the reason when we create a promise object, it gets executed without even calling then.
Observables being lazy-loaded gives us the ability to execute it whenever we like. When creating an Observable, the callback function will only get called upon subscribing to it. Let us take the previous example and comment out the subscribe and unsubscribe methods. Now you can see the observable is not getting called hence the screen blank.
3 - Observables are Both Sync and Async
The observables are neither Asynchronous or synchronous. It's all about the nature of implementation. The way you implement them tells how it will respond. The following example maintains the order as we are making the next subscribe call after the first one completes. This will maintain the synchronous nature.
Another way to make asynchronous call with observables is by using the concatMap operator. ConcatMap waits for each observable to finish until it proceeds to the next one giving it asynchronous flow in nature. Let's see an example of this:
As for promises, they are only capable of making asynchronous calls.
4 - Emitting Single & Multiple values
Observables have the power to return multiple values if desired but promises lack that capability. That is one of the key differences.
In the example above, you can see how the subscription emits multiple values after certain amount of time while when we try doing the same thing with promise, it fails as a promise object can only emit single values. When a promise resolves or rejects, the client receives either data or an error message, but in both cases it’ll be a single piece of data.
Use Cases
- Promises are eager, hence use them where you want something to happen immediately without any trigger. Observables are lazy hence best used when something will happen later in time.
- Use Observable if you want to have the ability to accept multiple events from the same source.
- Use observables if you want to be able to unsubscribe from an event whether it's completed or not. E.g if nothing happens in 10 seconds, unsubscribe it.
Conclusion
In a nutshell, both promise and observables have their advantages and its best to use them when either of the above use cases is met.I hope you find this article helpful, If you did, follow me on Medium and Twitter to get the notification for more articles on Software Development and don’t forget to hit the clap button. Finally! Thanks for reading and Happy learning!
