Key takeaways:
Promises are eager, executing immediately upon creation, while observables are lazy, only executing when someone subscribes to them.
Promises emit a single value once resolved, while observables can emit multiple values over time, making them better for handling streams like user input or server responses.
Observables are created using the
Observableclass and require a subscription to receive emitted values, while promises resolve once and don’t need a subscription.Observables allow cancellation via unsubscribing, preventing memory leaks, and provide robust error handling, unlike promises which resolve or reject without the ability to cancel.
Observables support chaining operations like transformation, filtering, and concatenation. Promises lack this level of complexity and only resolve with a single output.
Observables allow unsubscribing to stop further emissions, making them more suitable for dynamic applications, especially when navigating between different routes in Angular.
Promises and observables are major concepts in asynchronous programming. Both are used to handle asynchronous functions. Promises sometimes become superior, while observables mostly lead the way. Let’s see what makes these two techniques different in the context of Angular.
The promises are eager as they are called as soon as created. These don’t need to be listened to view the content. While on the other hand, observables wait for someone to listen to them. They will never be called if no one subscribed to them. Let’s see an example where we have created one promise using the Promise keyword and one observable named Observable. We have not listened to either of these and just added callback functions. If you run the app, open the App URL in a new tab, and inspect the console, you’ll see the Promise is working ... appears in the console even though we haven’t listened to the promise.
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'sample';
ngOnInit(){
console.log(this.title)
const promise = new Promise((resolve:any) => {
// This text will appear in the console even though we haven't listened to the promise
console.log("Promise is working ...")
setTimeout(()=>{
resolve("promise is working")
}, 1000)
})
// Nothing will appear in the console because we have not subscribed to the observable
const observable = new Observable((sub:any) => {
console.log("Observale is running ...")
sub.next("Observable is working")
})
}
}The promise emits only a single value whenever the promise is resolved, but an observable can emit multiple values over a period of time. This makes observables better suited for handling data streams such as user input or server responses. Let’s look at the following example. In this example, we have tried to resolve several statements using Promise and the same goes for Observable. Similarly, we have listened to both using the then and subscribe functions, respectively. If you open the App URL in a new tab and inspect the console, you’ll see only the Promise 1 is working appears when the Promise is subscribed, while all statements appear for Observable when it’s subscribed.
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'sample';
ngOnInit(){
const promise = new Promise((resolve:any) => {
resolve("Promise 1 is working") // only this will be printed, rest will be emitted
resolve("Promise 2 is working")
resolve("Promise 3 is working")
})
promise.then(output => console.log(output))
const observable = new Observable((sub:any) => {
// all of these will appear in the console as observables can display multiple values
sub.next("Observable 1 is working")
sub.next("Observable 2 is working")
sub.next("Observable 3 is working")
})
observable.subscribe(values => console.log(values))
}
}Observables in Angular are created using the Observable class, and we can subscribe to them using the subscribe method. This allows us to receive emitted values over time, unlike Promises, which resolve once and cannot emit multiple values.
Observables can be canceled by unsubscribing, stopping further emissions, and avoiding memory leaks. They also offer robust error handling, enabling retries or fallback strategies, unlike Promises, which either resolve or reject and cannot be canceled.
Observables can differentiate between transformation and subscription. Promises don’t have this ability and cannot perform multiple operations on values. Observables can transform the values using multiplication, addition, filtration, concatenation, and several other methods. Here is an example of how it can be done.
obs.pipe(map((value) => value * 2));obs.pipe(filter(value => value == "value"))
Observables can be unsubscribed, while promises cannot. Unsubscribing is very important as it removes the listener from receiving further values, which comes in handy while hopping from one route to another.
In Angular, both promises and observables are essential tools for handling asynchronous operations, each with its strengths. Promises are straightforward and resolve once, making them suitable for simple tasks. However, observables offer more flexibility, supporting multiple values, cancellation, error handling, and complex data transformations. This makes observables more powerful for managing data streams and event-driven architectures in Angular applications. Understanding these differences helps in choosing the right approach for your specific use case.
Haven’t found what you were looking for? Contact Us
Free Resources