what different between observable and promise angular 9?

Question

I work on angular 9 i sarch more for different between promise and observable on angular 9

but i can't know what different

so can any one help me and tell me what different between both promise and observable and which is best for use ?

Rajesh Gami · Answer

Promise A Promise handles a single event when an async operation completes or fails.Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn't so far. Observable An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn't matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case. Observable also has the advantage over Promise to be cancellable . If the result of an HTTP request to a server or some other expensive async operation isn't needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don't need the notification or the result it provides anymore. While a Promise starts immediately, an Observable only starts if you subscribe to it. This is why Observables are called lazy. Let’s see the difference between observable and promise (observable vs promise) Observables Promises Emit multiple values over a period of time. Emit a single value at a time. Are lazy: they’re not executed until we subscribe to them using the subscribe() method. Are not lazy: execute immediately after creation. Have subscriptions that are cancellable using the unsubscribe() method, which stops the listener from receiving further values. Are not cancellable. Provide the map for forEach, filter, reduce, retry, and retryWhen operators. Don’t provide any operations. Deliver errors to the subscribers. Push errors to the child promises. Now let’s see code snippets / examples of a few operations defined by observables and promises. Operations Observables Promises Creation const obs = new Observable((observer) => { observer.next(10); }) ; const promise = new Promise(() => { resolve(10); }); Transform Obs.pipe(map(value) => value * 2); promise.then((value) => value * 2); Subscribe const sub = obs.subscribe((value) => { console.log(value) }); promise.then((value) => { console.log(value) }); Unsubscribe sub.unsubscribe(); Can’t unsubscribe

Munesh Sharma · Answer

Use Promise instead of an Observable, when: You need to handle the (future response) event no matter what (no unsubscribe, no cancel: after you subscribe, there will be an answer, 100%, and you will have to handle it, 100%, the code will get executed) One Subscription = One Event handling: there will be only one event from the source, so the future response and the completition is the same event. Use Observable instead of a Promise, when: You want to have the ability to accept multiple events from the same source You need a "I am finished with this event stream" handler You want to be able to unsubscribe from a possibly never ending stream of data, and re-subscribe anytime (meaning also that you might don't really need to fulfill the subscription at all: for instance, if nothing happens in 10 sec, let's unsubscribe, nobody will ever handle the late answer) You want to use the RxJS "Stream API" to preprocess the data of your responses. For more you can below link https://www.youtube.com/watch?v=pzu17v2SeSM

satheesh d · Answer

The first thing is that the observable can return multiple values but in Promise it won't return multiple values.It returns the single value. The Obesrvables are behave like an array and filtering the values can be possible with observable. with observable, we can save the reference to the subcription. If we want to cancel the subcription then call that subcription to unsubscribe which cancels the observables. In observables, the retry options are also available for the server down issues. Sample code for understanding the differences, const demoPromise = new Promise(resolve => { setTimeout(() => { resolve( 'taxi' ); }, 200); }); demoPromise.then(result => { console.log( 'promise: ' , result); }) const demoObservable = new Rx.Observable(obs => { setTimeout(() => { obs.next( 'car' ); obs.next( 'bus' ); obs.next( 'truck' ); }, 200); }); const subscription = demoObservable .filter(result => result === 'car') .subscribe(result => { console.log( 'observable: ' , result); });

Satya Karki · Answer

This diagram can give some more insights

Satya Karki · Answer

Both Promises and Observables will help us work with the asynchronous functionalities in JavaScript. They are very similar in many cases, however, there are still some differences between the two as well, promises are values that will resolve in asynchronous ways like HTTP calls. On the other hand, observables deal with a sequence of asynchronous events. The main differences between them are listed below: Promise: having one pipeline usually only use with async data return not easy to cancel Observable: are cancellable are re-triable by nature such as retry and retryWhen stream data in multiple pipelines having array-like operations like map, filter etc can be created from other sources like events they are functions, which could be subscribed later on

Puneet Kankar · Answer

Hi Ahmed, Below are the basic differences between observable and promises. check the below links for a better understanding. https://stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables https://www.syncfusion.com/blogs/post/angular-promises-versus-observables.aspx https://dzone.com/articles/what-is-the-difference-between-observable-and-prom Observables Promises Emit multiple values over a period of time. Emit a single value at a time. Are lazy: they’re not executed until we subscribe to them using the subscribe() method. Are not lazy: execute immediately after creation. Have subscriptions that are cancellable using the unsubscribe() method, which stops the listener from receiving further values. Are not cancellable. Provide the map for forEach, filter, reduce, retry, and retryWhen operators. Don’t provide any operations. Deliver errors to the subscribers. Push errors to the child promises.

Rijwan Ansari · Answer

Both observables and promises help us work with asynchronous functionality in JavaScript. Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time. Observables - Emit multiple values over a period of time. - Are lazy: they’re not executed until we subscribe to them using the subscribe() method. - Have subscriptions that are cancellable using the unsubscribe() method, which stops the listener from receiving further values. - Provide the map for forEach, filter, reduce, retry, and retryWhen operators. - Deliver errors to the subscribers. Promises Emit a single value at a time. Are not lazy: execute immediately after creation. Are not cancellable. Don’t provide any operations. Push errors to the child promises. https://www.syncfusion.com/blogs/post/angular-promises-versus-observables.aspx

Sachin Singh · Answer

first, 99% time you don't need to think about promise. The question is why? Observable does everything that a promise can and it adds more functionalities to it. If you are hitting an API, there is a lot of chances that the server may be down, so you may wish to retry 2-3 times automatically, you can do this with Observable and rxjs retry method but not with promise. if you want to cancel the event you can use Unsubscribe(). Also, Observable is lazy loaded means it will not start to hit the API until you will call the Subscribe(), but Promise will start hitting the API as soon as you use it. so, just use Observable everywhere.

Munesh Sharma · Answer

Promise A Promise handles a single event when an async operation completes or fails. Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn't so far. Observable An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn't matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case. Observable also has the advantage over Promise to be cancellable . If the result of an HTTP request to a server or some other expensive async operation isn't needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don't need the notification or the result it provides anymore. you can find more from below link https://www.youtube.com/watch?v=pzu17v2SeSM&t=61s

Yazhini MP · Answer

Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time. Emit multiple values over a period of time. Emit a single value at a time. Observables provide the map for forEach, filter, reduce, retry, and retryWhen operators. Promises doen't provide ant operations.

Srinivasan Ramamoorthi · Answer

Refer this link https://www.syncfusion.com/blogs/post/angular-promises-versus-observables.aspx/amp

Amit Kumar Singh · Answer

In Angular 9 (and in JavaScript/TypeScript in general), Observables and Promises are both used for handling asynchronous operations, but they have some differences in their usage and behavior. Promises: Single Value: Promises represent a single value that will be resolved or rejected in the future. Eager Execution: When a Promise is created, it starts executing immediately. Once Resolved: A Promise resolves only once with a single value or gets rejected with an error. No Cancellation: Once a Promise is created, it cannot be canceled. Methods: Promises have methods like .then() and .catch() to handle successful resolution or errors respectively. Non-Cancellable: Once a Promise is settled (resolved or rejected), its state cannot be changed. Example of a Promise in JavaScript: const myPromise = new Promise((resolve, reject) => { // Perform asynchronous operation setTimeout(() => { // Simulate a successful result resolve('Data fetched successfully!'); // Simulate an error // reject('Error fetching data!'); }, 2000); }); myPromise .then((result) => { console.log(result); // Output: Data fetched successfully! }) .catch((error) => { console.error(error); // Output: Error fetching data! }); Observables: Multiple Values: Observables are streams of multiple values over time. Lazy Execution: Observables are lazy; they don’t start executing until they have a subscription. Multiple Emits: They can emit multiple values over time (zero, one, or many). Cancellation: Observables can be cancelled by unsubscribing, helping to prevent memory leaks. Methods: Observables have operators like subscribe() to handle emitted values and other operators to transform, filter, or manipulate the stream of values. Cancelable: Observables can be canceled by unsubscribing from them, preventing further emissions. Example of an Observable in Angular using RxJS (a popular library for reactive programming): import { Observable } from 'rxjs'; const myObservable = new Observable ((observer) => { // Perform asynchronous operation setTimeout(() => { // Emit a value observer.next('Data fetched successfully!'); // Simulate an error observer.error('Error fetching data!'); }, 2000); }); const subscription = myObservable.subscribe( (value) => console.log(value), // Output: Data fetched successfully! (error) => console.error(error) // Output: Error fetching data! ); // To unsubscribe (cancel) the Observable s ubscription.unsubscribe(); In Angular applications, Observables are widely used, especially with RxJS, because they provide powerful features for handling asynchronous data and are extensively used in services, HTTP requests, event handling, and more. Promises are also supported in Angular and can be used, but Observables are often preferred due to their flexibility and additional capabilities for handling streams of data.

Prasad Raveendran · Answer

In Angular 9 (and subsequent versions), both observables and promises are used for handling asynchronous operations, but they have different characteristics and functionalities. Observables: Streams of Data: Observables represent a stream of data over time. They can emit multiple values asynchronously. Lazy Execution: They are lazy, meaning the data is only emitted when something subscribes to the observable. Cancellation and Disposal: Observables support cancellation using the unsubscribe() method. This helps in managing resources and preventing memory leaks. Operators: They offer a wide range of operators (like map, filter, etc.) that can be used to transform, combine, or manipulate the emitted data streams. Supports Multiple Values: They can emit multiple values over time, making them suitable for handling events, user input, and continuous data streams. Promises: Single Value: Promises represent a single asynchronous operation that will eventually be resolved with a value or rejected with an error. Eager Execution: They are eager, meaning the asynchronous operation starts as soon as the promise is created. No Cancellation: Once a promise is initiated, it cannot be canceled. This is one of the key differences from observables. Simpler API: Promises have a simpler API compared to observables, with then() for handling a successful response and catch() for handling errors. Not Composable: They don't have built-in operators like observables, so chaining and manipulating operations isn’t as straightforward. Summary: Observables are streams that can emit multiple values over time, are lazy, support cancellation, have a variety of operators for data transformation, and are suitable for handling continuous data. Promises represent the result of a single asynchronous operation, are eager, cannot be canceled, have a simpler API, and are suitable for handling a single value asynchronously. In Angular, both observables and promises are used in different scenarios. Observables are extensively used with Angular's HttpClient for handling HTTP requests, managing event streams, and handling other asynchronous tasks. Promises are used when dealing with APIs that return promises or when integrating with existing promise-based libraries. However, Angular generally promotes the use of observables due to their flexibility and additional capabilities.