Difference between Angular Promises and Observables

Posted By :Rajat Soni |31st May 2022

 

To handle asynchronous data in Angular, we can use either Promise or Observable. Http and HttpClient's get and post methods both return Observable, which may be converted to Promise using the toPromise() method. So, when both are dealing with asynchronous data, what's the difference?

 

What actually the difference is?

Observable emits several values, whereas Promise emits a single value. So, while Promise can handle a single response for the same request when handling an HTTP request, if there are numerous responses to the same request, we must utilise Observable. Yes, for the same request, Observable can handle many responses.

Let's put this into practise with an example.

 

Promise

const promise = new Promise((data) =>

{ data(1);

data(2);

data(3); })

.then(element => console.log(‘Promise ‘ + element));

 

Observable

const observable = new Observable((data) => {

data.next(1);

data.next(2);

data.next(3);

}).subscribe(element => console.log('Observable ' + element));

 

So, in the preceding code snippet, I constructed promise and observable, respectively, of the Promise and Observable types. Promise, on the other hand, returns only the first value and ignores the rest, whereas Observable returns all values and prints 1, 2, 3 in the console.

While Promise is not lazy, Observable is.

Observables are slow by nature, and they don't yield anything until we subscribe to them.

We may conceive of an observable as a stream that emits many values over time and calls the same callback function for each item emitted, thus we can use the same API to handle asynchronous data with an observable. if the data is sent as a single value or as a series of values over a period of time

 

Promise: 

  • A promise is Not Lazy
  • A Promise cannot be cancelled


Observable: 

  • Lazy is observable. The 'Observable' is a sluggish creature. It isn't called till we've signed up for it.
  • The unsubscribe() method can be used to cancel an Observable.
  • A complement Map, foreach, filter, reduce, retry, retryWhen, and more sophisticated operators are available in Observable.


Conclusion

In JavaScript, both Observables and Promises can be used to handle async activities. While an Observable can perform all of the functions of a Promise, the opposite is not true.

 


About Author

Rajat Soni

Rajat Soni is working as a Frontend Developer with approx 2+ years of experience and holding certification in the domain. He is skilled in AWS services ( EC2, S3 bucket, Open search), HTML/CSS, ReactJS, Client Management, Solution Architect and many more related technologies. He has been a part many successful projects namely Konfer project, where he has migrated the project from Angular js to Angular 12 , Virgin Media Project, I-Infinity project & many more along with leading the team to handling the project end to end.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us