Observable And Promise In Angular

In this article, we will discuss Observable and Promise in Angular with the help of step-by-step practical implementation.

Agenda

Synchronous vs. Asynchronous
Observable vs. Promise

Synchronous Vs. Asynchronous

In the Synchronous process, multiple tasks are executed one after another, which means the second task is waiting to complete the first task. In that case, the thread needs to wait before moving to another task.
Another side, in the asynchronous process, there are multiple processes executed simultaneously. It will not wait for the complete previous task. It will just move to the next task and start the execution.

Observable Vs. Promise

Observable	Promise
Observable can emit multiple values.	A promise can emit only a single value at a time.
Observables are lazy when we subscribe then only that will execute.	Promises are not lazy; they will execute immediately on creation.
Observable can be synchronous or asynchronous.	Promises are asynchronous.
Observable can be unsubscribed.	There is no facility to unsubscribe promises.
Observable has different RxJS functions like Filter, Map, Reduce, and many more.	Promises don't have any function.

Emit Values

var observable = new Observable(res => {
    res.next("Hello Piyush");
    res.next("Hello Vivek");
    res.next("Hello Rajesh");
});
observable.subscribe(console.log)
//Output --> Observable can emmit multiple values
//Hello Piyush
//Hello Vivek
//Hello Rajesh
var promise = new Promise(res => {
    res("Hello Piyush");
    res("Hello Vivek");
    res("Hello Rajesh");
});
promise.then(console.log)
//output
//Hello Piyush --> Promise will emit only single values that's why other two values are not emmited.

Lazy load

var observable = new Observable(res => {
    res.next("Hello....");
});
observable.subscribe(console.log) //Whenever subscribe observable then only it will emmit values beacuse it is lazy load.
//Output
//Hello....
var promise = new Promise(res => {
    console.log("Promise start executing..."); //In console can see this output before calling promise it will initialized on creation and eagerly load.
    res("Hello....");
});
//Call promise
promise.then(console.log)
//Output
//Promise start executing...
//Hello....

Asynchronous Promise Vs. Synchronous/Asynchronous Observable

//Async Promise
var promise = new Promise(res => {
    console.log("Start Executing...");
    res("Hello...");
    console.log("Execution End...");
});
promise.then(console.log)
//Output
//Start Executing...
//Execution End...
//Hello...
//Async Observable
var observable = new Observable(res => {
    console.log("Start Executing...");
    setTimeout(() => {
        res.next("Hello Piyush");
        res.next("Hello Vivek");
        res.next("Hello Rajesh");
    }), 1000
    console.log("Execution End...");
});
observable.subscribe(console.log)
//Output
//Start Executing...
//Execution End...
//Hello Piyush
//Hello Vivek
//Hello Rajesh
//Sync Observable
var observable = new Observable(res => {
    console.log("Start Executing...");
    res.next("Hello Piyush");
    res.next("Hello Vivek");
    res.next("Hello Rajesh");
    console.log("Execution End...");
});
observable.subscribe(console.log)
//Output
//Start Executing...
//Hello Piyush
//Hello Vivek
//Hello Rajesh
//Execution End...

Subscribe and Unsubscribe Observable

In some cases, the observable must be unsubscribed if required because it executes in the background and sometimes creates a memory leak problem. That's why we need to handle that scenario.

//observable
const observable = new Observable((res) => {
    let count = 0;
    setInterval(() => {
        count = count + 1;
        res.next(count);
    }, 1000)
})
//subscribe the observable
this.subscription = observable.subscribe(ele => {
    console.log(ele)
})
//unsubscribe the observable
setTimeout(() => {
    this.subscription?.unsubscribe();
}, 12000)

RxJS Operators

Check the below link related to the official documentation to understand more about RxJS

https://rxjs.dev/guide/overview

GitHub Link

https://github.com/Jaydeep-007/ObservableAndPromiseDemo/tree/master

Conclusion

This article discussed the difference between Promise and Observable with a few practical examples.

Happy Learning!