What is the Difference Between Promises and Observables?

Promises vs Observables

This is one of the most commonly asked interview questions (specifically if you are applying for an Angular developer role).

https://medium.com/media/c50fe43d16b1df62fd741adf7c1e501a/href

Eager vs Lazy

Promise: It is eager — It starts executing immediately once it is defined, It doesn’t matter whether we are calling the then()/catch() method.

Observable: It is lazy — It won’t start executing until we subscribe to it.

https://medium.com/media/e68a8747c4d3568523bdc667da4b06e0/href

Async vs Sync

Promise: It is always Async, Once the value is resolved/rejected, the respective callback function will go to the micro task queue and gets executed once the call stack is empty.

No matter how the value is resolved, Even if it is resolved synchronously (directly) or asynchronously, the callback function will be executed in an async way only.

Observable: It can be either Sync or Async — If we are emitting a value synchronously, then it will behave synchronously and if we are emitting the value asynchronously it will behave asynchronously.

https://medium.com/media/99d4bebe097004065d8f863b174b008d/href

Single value vs Multiple values

Promise: It can return only one value, it can either resolve one value or reject one value, once resolved/rejected, that’s the end, we can’t return anything.

Observable: It can emit multiple streams of values, once the observable is subscribed, a stream will be open and all the emitted values will be captured and the stream gets close once unsubscribed.

https://medium.com/media/11dc336c6f0ed2c5bc03f12e8b6c58e5/href

Cancellable vs Non-Cancellable

Since promises are eager and return only one value, they will be executed immediately once it is defined, so there is no way to cancel them once it is defined.

But Observable can be canceled (stream will be closed) by unsubscribing to it.

https://medium.com/media/cafcf2ea338a07eb1c279a6e80f722be/href

Unicast vs Multicast

Promises are unicast, which means promises will be executed only once, even if we call then() multiple times.

Observables are multicast, which means every time we subscribe to the observable, it will be executed again and again ( observables can be multicasted to multiple subscriptions ).

https://medium.com/media/00201599557eac11f03f1bd205a80058/href

Live code example — stackblitz

Thanks for reading, I hope you have found this useful.

Connect with me on Linkedin, GithubCodepen

Bit: Feel the power of component-driven dev

Say hey to Bit. It’s the #1 tool for component-driven app development.

With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.

  • Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
  • Easily share, and reuse components as a team.
  • Quickly update components across projects.
  • Make hard things simple: Monorepos, design systems & micro-frontends.

Try Bit open-source and free→

Learn more


What is the Difference Between Promises and Observables? was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Bits and Pieces - Medium and was authored by Makesh Kumar

Promises vs Observables

This is one of the most commonly asked interview questions (specifically if you are applying for an Angular developer role).

Eager vs Lazy

Promise: It is eager — It starts executing immediately once it is defined, It doesn’t matter whether we are calling the then()/catch() method.

Observable: It is lazy — It won't start executing until we subscribe to it.

Async vs Sync

Promise: It is always Async, Once the value is resolved/rejected, the respective callback function will go to the micro task queue and gets executed once the call stack is empty.

No matter how the value is resolved, Even if it is resolved synchronously (directly) or asynchronously, the callback function will be executed in an async way only.

Observable: It can be either Sync or Async — If we are emitting a value synchronously, then it will behave synchronously and if we are emitting the value asynchronously it will behave asynchronously.

Single value vs Multiple values

Promise: It can return only one value, it can either resolve one value or reject one value, once resolved/rejected, that’s the end, we can't return anything.

Observable: It can emit multiple streams of values, once the observable is subscribed, a stream will be open and all the emitted values will be captured and the stream gets close once unsubscribed.

Cancellable vs Non-Cancellable

Since promises are eager and return only one value, they will be executed immediately once it is defined, so there is no way to cancel them once it is defined.

But Observable can be canceled (stream will be closed) by unsubscribing to it.

Unicast vs Multicast

Promises are unicast, which means promises will be executed only once, even if we call then() multiple times.

Observables are multicast, which means every time we subscribe to the observable, it will be executed again and again ( observables can be multicasted to multiple subscriptions ).

Live code example — stackblitz

Thanks for reading, I hope you have found this useful.

Connect with me on Linkedin, GithubCodepen

Bit: Feel the power of component-driven dev

Say hey to Bit. It’s the #1 tool for component-driven app development.

With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.

  • Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
  • Easily share, and reuse components as a team.
  • Quickly update components across projects.
  • Make hard things simple: Monorepos, design systems & micro-frontends.

Try Bit open-source and free→

Learn more


What is the Difference Between Promises and Observables? was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Bits and Pieces - Medium and was authored by Makesh Kumar


Print Share Comment Cite Upload Translate Updates
APA

Makesh Kumar | Sciencx (2022-06-30T12:05:30+00:00) What is the Difference Between Promises and Observables?. Retrieved from https://www.scien.cx/2022/06/30/what-is-the-difference-between-promises-and-observables/

MLA
" » What is the Difference Between Promises and Observables?." Makesh Kumar | Sciencx - Thursday June 30, 2022, https://www.scien.cx/2022/06/30/what-is-the-difference-between-promises-and-observables/
HARVARD
Makesh Kumar | Sciencx Thursday June 30, 2022 » What is the Difference Between Promises and Observables?., viewed ,<https://www.scien.cx/2022/06/30/what-is-the-difference-between-promises-and-observables/>
VANCOUVER
Makesh Kumar | Sciencx - » What is the Difference Between Promises and Observables?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/30/what-is-the-difference-between-promises-and-observables/
CHICAGO
" » What is the Difference Between Promises and Observables?." Makesh Kumar | Sciencx - Accessed . https://www.scien.cx/2022/06/30/what-is-the-difference-between-promises-and-observables/
IEEE
" » What is the Difference Between Promises and Observables?." Makesh Kumar | Sciencx [Online]. Available: https://www.scien.cx/2022/06/30/what-is-the-difference-between-promises-and-observables/. [Accessed: ]
rf:citation
» What is the Difference Between Promises and Observables? | Makesh Kumar | Sciencx | https://www.scien.cx/2022/06/30/what-is-the-difference-between-promises-and-observables/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.