What is the difference between Promises and Observables

Question

What is the difference between Promise and Observable in Angular   An example on each would be helpful in understanding both the cases  In what scenario can we use each case

User · Answer

Promises are focused only for single values or resolves, observables are stream of data.
Observables can be canceled but promises can't be canceled.

The least known one, atleast to me is

Promises are always of asynchronous nature, but observables can be both synchronous and asynchronous.

User · Answer

Both Promises and Observables help us dealing with asynchronous operations  They can call certain callbacks when these asynchronous operations are done  Angular uses Observables which is from RxJS instead of promises for dealing with HTTP  Below are some important differences in promises  amp  Observables

User · Answer

Promise - Provide a single future value  Not lazy   Not cancel-able  It will either reject or resolve   Observable - Provide multiple future value  Lazy   Cancel-able   It provide other methods live map filter reduce

User · Answer

Observables are often compared to promises  Here are some key differences   Observables are declarative  computation does not start until subscription  Promises execute immediately on creation  This makes observables useful for defining recipes that can be run whenever you need the result   Observables provide many values  Promises provide one  This makes observables useful for getting multiple values over time   Observables differentiate between chaining and subscription  Promises only have  then   clauses  This makes observables useful for creating complex transformation recipes to be used by other parts of the system  without causing the work to be executed   Observables subscribe   is responsible for handling errors  Promises push errors to the child promises  This makes observables useful for centralized and predictable error handling   That is the most simplest difference that you may found on ANGULAR IO docs  rest answer is given by most is correct at its own place

User · Answer

Promise emits a single value while Observable emits multiple values  So  while handling a HTTP request  Promise can manage a single response for the same request  but what if there are multiple responses to the same request  then we have to use Observable  Yes  Observable can handle multiple responses for the same request   Promise  const promise   new Promise  data    gt    data 1     data 2     data 3       then element   gt  console log    Promise       element      Output  Promise 1   Observable  const observable   new Observable  data    gt    data next 1   data next 2   data next 3      subscribe element   gt  console log  Observable     element      Output  Observable 1 Observable 2 Observable 3

User · 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   Also  I ve created the graphical image for you below to show the differences visually

User · Answer

a Promise is eager  whereas an Observable is lazy  a Promise is always asynchronous  while an Observable can be either synchronous or asynchronous  a Promise can provide a single value  whereas an Observable is a stream of values  from 0 to multiple values   you can apply RxJS operators to an Observable to get a new tailored stream

User · Answer

I believe all the other answers should clear your doubts  Nevertheless  I just wanted to add that observables are based on functional programming  and I find very useful the functions that come with it like map  flatmap  reduce  zip  The consistency the web achieves especially when it depends on API requests is a brutal improvement   I strongly recommend this documentation  since it s the official documentation of reactiveX and I find it to be the most clear out there   If you want to get into observables  I would suggest this 3-part post  http   blog danlew net 2014 09 15 grokking-rxjava-part-1   Although it s meant for RxJava  the concepts are the same  and it s really well explained  In reactiveX documentation  you have the equivalences for each function  You must look for RxJS

User · Answer

Both Promises and Observables provide us with abstractions that help us deal with the asynchronous nature of our applications  The difference between them was pointed out clearly by  G  nter and  Relu    Since a code snippet is worth a thousand words  let go through the below example to understand them easier       Thanks  Christoph Burgdorf for the awesome article     Angular uses Rx js Observables instead of promises for dealing with HTTP   Suppose that you are building a search function that should instantly show you results as you type  Sound familiar but there are a lot of challenges that come with that task    We don t want to hit the server endpoint every time user presses a key  it should flood them with a storm of HTTP requests  Basically  we only want to hit it once the user has stopped typing instead of with every keystroke  Don   t hit the search endpoint with the same query params for subsequent requests  Deal with out-of-order responses  When we have multiple requests in-flight at the same time we must account for cases where they come back in unexpected order  Imagine we first type computer  stop  a request goes out  we type car  stop  a request goes out  Now we have two requests in-flight  Unfortunately  the request that carries the results for computer comes back after the request that carries the results for car     The demo will simply consist of two files  app ts and wikipedia-service ts  In a real world scenario  we would most likely split things further up  though     Below is Promise-based implementation that doesn   t handle any of the described edge cases   wikipedia-service ts  import   Injectable   from   angular core   import   URLSearchParams  Jsonp   from   angular http     Injectable   export class WikipediaService     constructor private jsonp  Jsonp        search  term  string        var search   new URLSearchParams       search set  action    opensearch        search set  search   term       search set  format    json        return this jsonp                  get  http   en wikipedia org w api php callback JSONP CALLBACK     search                     toPromise                    then  response    gt  response json   1            We are injecting the Jsonp service to make a GET request against the Wikipedia API with a given search term  Notice that we call toPromise in order to get from an Observable lt Response gt  to a Promise lt Response gt   Eventually end up with a Promise lt Array lt string gt  gt  as the return type of our search method   app ts     check the plnkr for the full list of imports import       from          Component     selector   my-app     template         lt div gt         lt h2 gt Wikipedia Search lt  h2 gt         lt input  term type  text   keyup   search term value   gt         lt ul gt           lt li  ngFor  let item of items  gt   item   lt  li gt         lt  ul gt       lt  div gt         export class AppComponent     items  Array lt string gt      constructor private wikipediaService  WikipediaService        search term        this wikipediaService search term                            then items   gt  this items   items           Not much of a surprise here either  We inject our WikipediaService and expose it   s functionality via a search method to the template  The template simply binds to keyup and calls search term value    We unwrap the result of the Promise that the search method of the WikipediaService returns and expose it as a simple Array of strings to the template so that we can have  ngFor loop through it and build up a list for us   See the example of Promise-based implementation on Plunker    Where Observables really shine  Let   s change our code to not hammer the endpoint with every keystroke but instead only send a request when the user stopped typing for 400 ms  To unveil such super powers we first need to get an Observable lt string gt  that carries the search term that the user types in  Instead of manually binding to the keyup event  we can take advantage of Angular   s formControl directive  To use this directive  we first need to import the ReactiveFormsModule into our application module   app ts  import   NgModule   from   angular core   import   BrowserModule   from   angular platform-browser   import   JsonpModule   from   angular http   import   ReactiveFormsModule   from   angular forms     NgModule     imports   BrowserModule  JsonpModule  ReactiveFormsModule    declarations   AppComponent     bootstrap   AppComponent     export class AppModule      Once imported  we can use formControl from within our template and set it to the name  term     lt input type  text   formControl   term   gt    In our component  we create an instance of FormControl from  angular form and expose it as a field under the name term on our component   Behind the scenes  term automatically exposes an Observable lt string gt  as property valueChanges that we can subscribe to  Now that we have an Observable lt string gt   overcoming the user input is as easy as calling debounceTime 400  on our Observable  This will return a new Observable lt string gt  that will only emit a new value when there haven   t been coming new values for 400ms   export class App     items  Array lt string gt     term   new FormControl      constructor private wikipediaService  WikipediaService        this term valueChanges                debounceTime 400            wait for 400ms pause in events                distinctUntilChanged        ignore if next search term is same as previous                subscribe term   gt  this wikipediaService search term  then items   gt  this items   items            It would be a waste of resources to send out another request for a search term that our app already shows the results for   All we have to do to achieve the desired behavior is to call the distinctUntilChanged operator right after we called debounceTime 400   See the example of Observable implementation on Plunker     For dealing with out-of-order responses  please check the full article   http   blog thoughtram io angular 2016 01 06 taking-advantage-of-observables-in-angular2 html   As far as I am using Http in Angular  I agree that in the normal use cases there is not much difference when using Observable over Promise  None of the advantages are really relevant here in practice  Hope I can see some advanced use case in the future          Learn more         https   angular-2-training-book rangle io handout observables    https   angular io tutorial toh-pt6 observables

User · Answer

Even though this answer is late  i have summarized the differences below   Observable    Observable is just a function that takes an observer and returns a  function Observer  an object with next  error  Observer allows to subscribe unsubscribe to its data stream  emit next value to the observer  notify the observer about errors and inform the observer about the stream completion Observer provides a function to handle next value errors and end of stream ui events http responses data with web sockets   Works with multiple values over time It is cancel-able retry-able and supports operators such as map filter reduce etc  Creating an Observable can be -Observable create   - returns Observable that can invoke methods on -Observer  Observable from   - converts an array or iterable into -Observable  Observable fromEvent   - converts an event into Observable  -Observable fromPromise   - converts a Promise into Observable  -Observable range   - returns a sequence of integers in the speci ed range   Promise    A promise represents a task that will finish in the future   Promises become resolved by a value   Promises get  rejected by exceptions  Not cancellable and it returns a single value A promise expose a function  then    -then returns a new    promise    -allows for the attachment of that will be executed based on state     -handlers are    guaranteed to execute in order attached

User · Answer

Below are some important differences in promises  amp  Observables    Promise   Emits a single value only Not cancellable Not sharable Always asynchronous   Observable   Emits multiple values Executes only when it is called or someone is subscribing Can be cancellable Can be shared and subscribed that shared value by multiple subscribers  And all the subscribers will execute at a single point of time  possibly asynchronous   For better understanding refer to the https   stackblitz com edit observable-vs-promises

User · Answer

Promises and Observables both handle the asynchronous call only   Here are the differences between them   Observable   Emits multiple values over a period of time Is not called until we subscribe to the Observable Can be canceled by using the unsubscribe   method Provides the map  forEach  filter  reduce  retry  and retryWhen operators   Promise    Emits only a single value at a time Calls the services without  then and  catch Cannot be canceled Does not provide any operators

User · Answer

Promises   Definition  Helps you run functions asynchronously  and use their return values  or exceptions  but only once when executed  Not Lazy Not cancellable  There are Promise libraries out there that support cancellation  but ES6 Promise doesn t so far   The two possible decisions are     Reject Resolve  Cannot be retried Promises should have access to the original function that returned the promise to have a retry capability  which is a bad practice    Observables   Definition  Helps you run functions asynchronously  and use their return values in a continuous sequence multiple times  when executed  By default  it is Lazy as it emits values when time progresses  Has a lot of operators which simplifies the coding effort  One operator retry can be used to retry whenever needed  also if we need to retry the observable based on some conditions retryWhen can be used   Note  A list of operators along with their interactive diagrams is available here at RxMarbles com

User · Answer

Observables and  Promises are helping us to work with the asynchronous functionalities in JavaScript typescript  They are very similar in many cases  however  there are still some differences between them

User · Answer

I see a lot of people using the argument that Observable are  cancellable  but it is rather trivial to make Promise  cancellable    x000D   x000D  function cancellablePromise body    x000D    let resolve  reject  x000D    const promise   new Promise  res  rej    gt    x000D      resolve   res  reject   rej  x000D      body resolve  reject  x000D       x000D    promise resolve   resolve  x000D    promise reject   reject  x000D    return promise x000D    x000D   x000D     Example 1  Reject a promise prematurely x000D  const p1   cancellablePromise  resolve  reject    gt    x000D    setTimeout      gt  resolve  10   100   x000D     x000D   x000D  p1 then value   gt  alert value   catch err   gt  console error err   x000D  p1 reject new Error  denied       expect an error in the console x000D   x000D     Example  Resolve a promise prematurely x000D  const p2   cancellablePromise  resolve  reject    gt    x000D    setTimeout      gt  resolve  blop    100  x000D     x000D   x000D  p2 then value   gt  alert value   catch err   gt  console error err   x000D  p2 resolve 200     expect an alert with 200 x000D   x000D   x000D

User · Answer

There are lots of answers on this topic already so I wouldn t add a redundant one    But to someone who just started learning Observable   Angular and wonders which one to use compare with Promise  I would recommend you keep everything Observable and convert all existing Promises in your project to Observable    Simply because Angular framework itself and it s community are all using Observable  So it would be beneficial when you integrate framework services or 3rd party modules and chaining everything together     While I appreciate all the downvotes but I still insist my opinion above unless someone put a proper comment to list a few scenarios that might still be useful in your Angular project to use Promises over Observables   Of course  no opinion is 100  correct in all cases but at least I think 98  of the time for regular commercial projects implemented in Angular framework  Observable is the right way to go   Even if you don t like it at the starting point of your simple hobby project  you ll soon realise almost all components you interact with in Angular  and most of the Angular friendly 3rd party framework are using Observables  and then you ll ended up constantly converting your Promise to Observable in order to communicate with them   Those components includes but not limited to  HttpClient  Form builder  Angular material modules dialogs  Ngrx store effects and ngx-bootstrap   In fact  the only Promise from Angular eco-system I dealt with in the past 2 years is APP INITIALIZER

User · Answer

Short answer    Observable is better  it has all Promises features plus extra features      Long answer    Promises    One Time Use  Return data once   No cancel  One listener No Socket Support One Listener   Observable    Return Data many times as data change Support cancel  Support socket Support many Listener and notify them when data change Support map  filter  reduce

User · Answer

There is one downside of Observables missing in the answers  Promises allow to use the ES7 async await functions  With them you can write asynchronous code like it would be a synchronous function call  so you don t need callbacks anymore  The only possibility for Observables to do this  is to convert them to Promises  But when you convert them to Promises  you can only have one return value again   async function getData        const data   await observable first   toPromise          do stuff with  data   no callback function needed      Further reading  How can I  await  on an Rx Observable

User · 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

User · Answer

Something I ran into that wasn t apparent from a first reading of the tutorial and docs was the idea of multicasting   Make sure you re aware that by default  multiple subscriptions will trigger multiple executions in an Observable    Multiple subscriptions to a single HTTP call Observable will trigger multiple identical HTTP calls unless you  share    enable multicasting    A promise forces you to deal with one thing at a time  unwrap its data  handle exceptions  has language support for cool things like async await  and is pretty barebones otherwise   An Observable has lots of bells and whistles  but you need to understand the power you re working with or it can be misused

User · Answer

A Promise emits a single event when an async activity finishes or fails   An Observable is like a Stream  in many languages  and permits to pass at least zero or more events where the callback is required for every event   Frequently Observable is preferred over Promise since it gives the highlights of Promise and more  With Observable it doesn t matter if you need to handle 0  1  or various events  You can use the similar API for each case   Promise   promise emits a single value  For example    const numberPromise   new Promise  resolve    gt        resolve 5       resolve 10        numberPromise then value   gt  console log value       still prints only 5   Observable   Emits multiple values over a period of time  For example     const numberObservable   new Observable  observer    gt            observer next 5           observer next 10            numberObservable subscribe value   gt  console log value       prints 5 and 10   we can think of an observable like a stream which emits multiple values over a period of time and the same callback function is called for each item emitted so with an observable we can use the same API to handled asynchronous data  whether that data is transmitted as a single value or multiple values over some stretch of time   Promise     A promise is Not Lazy A Promise cannot be cancelled   Observable     Observable is Lazy  The  Observable  is slow  It isn t called until we are subscribed to it  An Observable can be cancelled by using the unsubscribe   method An addition Observable provides many powerful operators like map  foreach  filter  reduce  retry  retryWhen etc    Angular Promises vs Observables

User · Answer

Promise   An Async Event Handler - The Promise object represents the eventual completion  or failure  of an asynchronous operation  and its resulting value    Syntax  new Promise executor    Eg   var promise eg   new Promise function resolve  reject      setTimeout function         resolve  foo         300        promise eg then function value      console log value        expected output   foo       console log promise eg       About Promise  It has one pipeline so  it will return values only once when its called  its one way handler so once called you may not able to cancel  useful syntax you can play around  when   and then    Observables   Observables are lazy collections of multiple values over time  its really a great approach for async operations  it can be done with rxjs which has cross platform support can use with angular react etc   its act like stream liner  can be multi pipeline   so once defined you can subscribe to get return results in many places   Syntax   import   as Rx from   reactivex rxjs   to init    Rx Observable fromEvent button   click    Rx Subject     etc  to subscribe  RxLogger getInstance     Eg   import   range   from  rxjs   import   map  filter   from  rxjs operators    range 1  200  pipe    filter x   gt  x   2     1     map x   gt  x   x    subscribe x   gt  console log x      since it support multi pipeline you can subscribe result in different location   it has much possibilities than promises   Usage  it has more possibilities like map  filter  pipe  map  concatMap etc

User · Answer

The basic difference between observable and promises are

User · 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  Observable provides operators like map  forEach  reduce      similar to an array There are also powerful operators like retry    or replay        that are often quite handy  A list of operators shipped with rxjs Lazy execution allows to build up a chain of operators before the observable is executed by subscribing  to do a more declarative kind of programming

User · Answer

I ve just dealt with an issue where Promises were the best solution  and I m sharing it here for anyone stumbling across this question in the event it s useful  this was exactly the answer I was looking for earlier    In an Angular2 project I have a service that takes some parameters and returns a value list to populate drop down menus on a form  When the form component initializes  I need to call the same service multiple times with different parameters to define a number of different dropdown menus  however if I simply queue up all the variables to call the service  only the last one succeeds and the rest error out  The service fetching from the database could only handle one request at a time   The only way to successfully populate all the dropdown menu variables was to call the service in a way that prevented a new request from being processed until the last request was finished  and the Promise    then mechanism solved the problem nicely     fetchValueList listCode   Promise lt any gt          return this dataSvc getValueList listCode  this stateSvc currentContext  this stateSvc currentLanguageCode             map response   gt  response json               toPromise           initializeDropDowns           this fetchValueList  First-Val-List              then data   gt                  this firstValList   data                return this fetchValueList  Second-Val-List                then data   gt                  this secondValList   data                return this fetchValueList  Third-Val-List                then data   gt                  this thirdValList   data                    I defined the functions in the component  and then called initializeDropDowns   in ngOnInit   The fetchValueList function returns a Promise  so the first call passes the first listCode and when the Promise resolves  the return value is in the data variable in the  then block where we can assign it to the this firstValList variable  As the function has returned data  we know the service has finished and it s safe to call again with the second listCode  the return value is in the data variable in the next  then block and we assign it to the this secondValList variable   We can chain this as many times as required to populate all the variables  and on the last code block we simply omit the return statement and the block terminates   This is a very specific use case where we have a single service that needs to be called multiple times as the component initializes  and where the service has to complete its fetch and return a value before it can be called again  but in this case  the Promise    then method was ideal

User · Answer

Overview    Both Promises and Observables help us dealing with asynchronous operations  They can call certain callbacks when these asynchronous operations are done  A Promise can only handle one event  Observables are for streams of events over time Promises can t be cancelled once they are pending Data Observables emit can be transformed using operators   You can always use an observable for dealing with asynchronous behaviour since an observable has the all functionality which a promise offers    extra   However  sometimes this extra functionality that Observables offer is not needed  Then it would be extra overhead to import a library for it to use them   When to use Promises   Use promises when you have a  single async operation of which you want to process the result  For example   var promise   new Promise  resolve  reject    gt         do something once  possibly async      code inside the Promise constructor callback is getting executed synchronously    if     everything turned out fine           resolve  Stuff worked           else       reject Error  It broke                after the promise is resolved or rejected we can call  then or  catch method on it  promise then  val    gt  console log val           logs the resolve argument         catch  val    gt  console log val          logs the reject argument   So a promise executes some code where it either resolves or rejects  If either resolve or reject is called the promise goes from a pending state to either a resolved or rejected state  When the promise state is resolved the then   method is called  When the promise state is rejected  the catch   method is called   When to use Observables   Use Observables when there is a stream  of data  over time which you need to be handled  A stream is a sequence of data elements which are being made available over time  Examples of streams are    User events  e g  click  or keyup events  The user generates events  data  over time  Websockets  after the client makes a WebSocket connection to the server it pushes data over time    In the Observable itself is specified when the next event happened  when an error occurs  or when the Observable is completed  Then we can subscribe to this observable  which activates it and in this subscription  we can pass in 3 callbacks  don t always have to pass in all   One callback to be executed for success  one callback for error  and one callback for completion  For example   const observable   Rx Observable create observer   gt         create a single value and complete   observer onNext 1     observer onCompleted         source subscribe    x   gt  console log  onNext   s   x         success callback   e   gt  console log  onError   s   e        error callback        gt  console log  onCompleted           completion callback         first we log  onNext  1     then we log  onCompleted   When creating an observable it requires a callback function which supplies an observer as an argument  On this observer  you then can call onNext  onCompleted  onError  Then when the Observable is subscribed to it will call the corresponding callbacks passed into the subscription

User · Answer

Promise   Provide a single future value  Not lazy  Not cancellable   Observable   Emits multiple values over time  Lazy  Cancellable  Supports map  filter  reduce and similar operators  You can use promises instead of observables when calling HTTP in Angular if you wish

User · Answer

While the accepted answer is good in general I don t think it emphasises that when dealing with Angular Components you almost always want to use an Observable because it supports cancelation  Promises cannot be cancelled and will resolve even if your component is destroyed  Angular tends to be forgiving until it s not    For example any manual change detection on a destroyed component will cause an exception   ngOnInit          promise api   this service getData   then d   gt         this data   d       this changeDetectorRef detectChanges                observable api   this service getData   pipe takeUntil this unsubscribe   subscribe  d    gt         this data   d       this changeDetectorRef detectChanges              If your component is destroyed before the promise is resolved  you ll get an attempt to use destroyed view error when the promise is resolved   Alternatively  if you use observables with the takeUntil pattern  then as soon as your component is destroyed the subscription will be cancelled   This is a bit of a contrived example but executing code for a component that is destroyed is probably going to lead to bugs  Unless you actually want to do that for some reason  p

User · Answer

Promise vs Observable similarity first   Both used to handle async code  Please look for promise example  Promise constructor passes a resolve reference function which will get called when it gets called with some value upon completion of some async task      const promise   new Promise resolve   gt      setTimeout      gt        resolve  Hello from a Promise          2000        promise then value   gt  console log value         Observable example now  Here also we pass a function to observable  an observer to handle the async task  Unlike resolve in the promise it has the following method and subscribes in place of then  So both handles async tasks  Now let s see the difference      const observable   new Observable observer   gt      setTimeout      gt        observer next  Hello from a Observable          2000        observable subscribe value   gt  console log value        Promise vs Observable difference  Promise   It resolves or reject a single value and can handle a single value async task at a time  A promise once resolved the async value it completes  can no longer be used its just one-time use and here it falls short  Not cancellable No rxjs support for operators    Observable   ability to emit multiple asynchronous values  Used to handle the stream of events or values  Consider you have an array of numerous tasks or values  and you want every time value is inserted into this it should be handled automatically  Anytime you push a value into this array  all of its subscribers will receive the latest value automatically  Observables are useful for observing input changes  repeated interval  broadcast values to all child components  web socket push notifications etc  Can be cancelled using unsubscribe method anytime  One more last good part that promise that has is support for rxjs operators  You have many pipe operators majorly map  filter  switchMap  combineLatest etc  to transform observable data before subscribing

User · Answer

In a nutshell  the main differences between a Promise and an Observable are as follows   a Promise is eager  whereas an Observable is lazy  a Promise is always asynchronous  while an Observable can be either synchronous or asynchronous  a Promise can provide a single value  whereas an Observable is a stream of values  from 0 to multiple values   you can apply RxJS operators to an Observable to get a new tailored stream   a more detailed can be found in this article

[angular] What is the difference between Promises and Observables?

Examples related to angular

Examples related to promise

Examples related to rxjs

Examples related to angular-promise

Examples related to angular-observable