Promises vs Observables in Angular: Understanding the Key Differences

In this article, we'll explore the key differences between Promises and Observables in Angular and understand how to use them effectively in your Angular applications.

Asynchronous programming is an essential part of modern web development, and Angular provides two popular ways of handling asynchronous operations: Promises and Observables. While both concepts serve the same purpose of handling asynchronous data, they have significant differences in how they work and their behavior.

What is Promise?

A promise is a native feature of JavaScript that was introduced in ES6.

This indicates that all current browsers natively support this functionality without the need for an external library or plugin.

Promises are a fundamental concept in JavaScript and are widely used for handling asynchronous operations. A Promise is an object that represents the eventual completion or failure of an asynchronous operation and returns a value or an error. A Promise has three states: pending, resolved, or rejected.

In Angular, Promises are commonly used for HTTP requests, where we make an HTTP request and wait for the server to respond. Here's an example of using Promises in Angular to fetch data from an API:

getData(): Promise<Data> {
  return this.http.get<Data>(url).toPromise();
}

In the above code, we're using the toPromise() method to convert the Observable returned by the http.get() method to a Promise. This allows us to use the then() method to handle the success or failure of the HTTP request.

What is Observable?

An Observable is not a part of JavaScript's core functionality. It is made available through a third-party library named RXJS.

Observables are a relatively new concept in JavaScript and are part of the RxJS library. An Observable is a stream of data that can be observed over time, and it can emit multiple values over time. Observables are used to handle events, HTTP requests, and other asynchronous operations in Angular.

In Angular, Observables are commonly used for handling HTTP requests, where we make an HTTP request and wait for the server to respond. Here's an example of using Observables in Angular to fetch data from an API:

getData(): Observable<Data> {
  return this.http.get<Data>(url);
}

In the above code, we're using the http.get() method to make an HTTP request and return an Observable. We can subscribe to the Observable to receive the response from the server and handle it using the subscribe() method.  

Key Differences Between Promises and Observables

let's look at some key differences between promises and Observable:

Single VS Multi Values

A promise can emit a single value over a period of time.

An Observable can emit multiple values over a period of time.

Lazy VS Non-Lazy

A Promise is not lazy in nature. A promise will be executed even if there is no then statement chained to that promise.

An Observable is lazy in nature, it won't run until there is a subscription for that observable.

If there is no subscription for an observable, the observable will not run.

Cancel VS Non-Cancel

A promise is not cancellable by default

An Observable can be cancellable, we can cancel an observable any time by calling the `unsubscibe()` method.

Chainning Methods

A Promise has chaining methods as then(), catch() or finally()

An Observable has the option of chaining with many functions like subscribe, map, filter, reduce, forEach, etc...

Error handling

Promises handle errors using the catch() method, while Observables handle errors using the error() method.  

Conclusion

Promises and Observables are both essential concepts in Angular for handling asynchronous operations. While Promises are more straightforward and easier to use, Observables provide more flexibility and power when dealing with complex asynchronous scenarios.

As a developer, it's important to understand the differences between Promises and Observables and choose the right one for your use case. With this knowledge, you can build more robust and scalable Angular applications that handle asynchronous operations effectively.