This article will compare the difference between Observable and Promise in Angular when we work with asynchronous.
Angular is a very famous front-end framework developed by Google. Like other frameworks, it uses a model based on a set of components to build an application.
This article will compare the difference between Observable and Promise when we work with asynchronous in Angular.
Overview Observable and Promise
There are many differences between Observable and Promise in Angular.
Even though the Observable is initialized, that doesn't mean it executes immediately. It will never be executed unless it is registered.
Promise is different, it is executed as soon as it is instantiated. This is what makes Observable more advantageous when working with asynchronous.
Observable can hold many values in it, but Promise cannot. Let's imagine Observable as an array, and Promise as a single value. That makes Observable more flexible in storing data than Promise.
Besides, Observable is also a stream (a flow), and this flow is changed over time. We can pass any value to that stream and the Observable will immediately emit us the new value.
Data Preprocessing
Unlike Promises, Observables can perform preprocessing of the data before we subscribe.
observable.pipe(map((x) => 2 * x));As for Promise, we can only process data when Promise returns data.
promise.then((x) => 2 * x);Possibility to Cancel
After we have registered an Observable, we can still cancel it, if we don't want it to run forever. Promise does not support this.
const sub = obs.subscribe(...);
sub.unsubscribe();Event Direction
Another point that makes Observable superior to Promises is that it can do events related to event-driven manipulation. For example when clicking a button:
import { fromEvent } from "rxjs";
const buttonEl = document.querySelector("button");
const clicks$ = fromEvent(buttonEl, "click");
let subscription = clicks$.subscribe(e => console.log("clicked", e));To do that, we need to use fromEvent the RxJS library. fromEvent is an Observable, we proceed subscribe.
And when we click on the button, the Observable will immediately emit the value to us. Also, we can cancel this event if we don't want to execute anymore.
subscription.unsubscribe();In addition to using Observable, we can do it in the usual way addEventListener to listen for events.
const buttonEl = document.querySelector("button");
const handler = e => console.log("clicked", e);
buttonEl.addEventListener("click", handler);And removeEventListener to cancel the event listening
button.removeEventListener(‘click’, handler);Observable or Promise?
In this article, we reviewed some of the differences between observable and promise in Angular. However, there are many things to learn about observable and promise, which we could discuss in the further articles.
Observables emit values that are subscribed to by observers. They don’t run unless something subscribes to them.
They’re always async and have additional functionality that async code like promises don’t have, like cancelation and retries.
