Angular Promise vs Observable

1
(No Transcript)
2
Angular Promise vs Observable

• JavaScript tightly adheres to the principles of
  an asynchronous concurrent language, and its
  execution engine immediately moves on to the
  subsequent statement without waiting for the
  previous one to complete.
• The term for such a concept is the asynchronous
  function, and the callbacks approach must be used
  to cope with it. Managing the codes is a
  difficult chore that makes the callback
  difficult.
• The all-in-one solutions to handle such
  circumstances are Angular Promises and
  Observables. Their implementations make it easier
  for us to hold that asynchronous code. They
  differ slightly in their rationale and their
  APIs, though.

3
What is Promise in Angular?

• In Angular development, choosing promise is one
  of the best ways to carry out asynchronous
  functions in your application that generally
  employs callbacks.
• The promise in Angular is fulfilled by emitting
  and finishing (resolving or rejecting) one value
  at a time. So it becomes simple for you to emit a
  single event from the API if you're utilising an
  Angular promise.
• The only remaining task for the controller
  (directive) is to register up to three callbacks
  success, error, and notifications.

4

• Generally, four states of the Angular Promise are
  available for your Angular application
  development.
• fulfilled
• rejected
• pending
• settled
• Remember that Angular Promise is not active as
  Observable. It means you are not allowed to
  cancel any specific event once it starts. So,
  passing the callback to the Promise constructor
  (controller or directive) will provide you with
  two options either resolve or reject the
  function, depending on your needs.

5
What is an Observable in Angular?

• Observables allow you to perform functions both
  synchronously and asynchronously, making them
  superior to Angular promise.
• Such values actively handle 0, 1, or many events,
  and they do so by making use of the same API for
  each event. The excellent part of Angular
  Observables is the number of operators actively
  simplifying coding, including retry(), replay(),
  map, forEach, reduce and others.
• The first step in using Observables is creating a
  subscription to emit values. If you skip this
  step, the code will serve as a blueprint for
  future talks.

6
Angular Promise vs Observable Differences You
Must Know

• It's time to compare Angular Promise with
  Observable on a technical level. To dispel
  questions about the distinction between Angular
  Promise and Observables, I have compiled a series
  of samples.
• Angular Promise handles one value Observables
  handles multiple values.
• Observable subscriptions are cancellable
  promises arent
• Eager vs lazy execution
• Runtime execution
• Interoperability

7

• 1. Angular Promise handles one value Observables
  handles multiple values.
• The ability to alter the fulfilled value is one
  of the key distinctions between Observable and
  Angular Promise. Therefore, for your Angular
  application, you may merely emit (either reject
  or resolver) a single value.
• You must have a fundamental understanding of what
  is Angular in order to comprehend this idea.
• Additionally, you are free to emit many results
  if I discuss Observables. Until the observer is
  finished or the subscription unsubscribes, the
  subscriber will receive results.

8

• 2. Observable subscriptions are cancellable
  promises arent
• Once an Angular promise is started, it seems
  impossible to cancel the event. So instead, the
  callback passed to the Promise constructor is
  solely responsible for resolving or rejecting the
  promise.
• The subscriber reacts to the result once fired
  hence, its completely passive.
• Compared to Angular Promise, Observables are less
  passive and on subscribe creation process, you
  can quickly opt out of the observer at any time.
• So, if you are no longer interested in getting
  the response, you can opt for such scenarios. The
  best example is when a user leaves a page.

9

• Yes, youll find multiple ways to cancel/complete
  subscribers.
• Some of the common one to cancel subscribers are
  mentioned below
• unsubscribe It allows you to cancel the
  subscription from the Observation manually.
• take It enables you to take number X of elements
  and easily cancel the subscription process.
• takeUntil It makes it easy for you to take
  values until the passed Observable emits any
  value.

10

• 3. Eager vs Lazy Execution
• In the discussion about Angular Promise vs
  Observable, we need to understand the process of
  execution. And that is done by using the Eager
  and Lazy execution method.
• Lets put it simply. You can execute the Angular
  Promises eagerly. On the other hand, Observables
  are executed lazily.
• What is Lazy and Eager execution?
• Eager It allows you to execute the Promise
  callback, especially at the constructor level.
• Lazy The Producer function will only trigger
  after a subscription is created for that
  Observable. Otherwise, it will stay idle.

11

• 4. Runtime execution
• You can quite easily queue the callback in the
  microtask queue after ES Promises has reached the
  resolved stage and the execution happens after
  the current macro task is finished.
• By just relying on schedulers, observables let
  you easily fine-tune the runtime execution.
  Controlling the state is a scheduler's main
  responsibility, especially when a subscription
  begins and you start receiving notifications for
  it.
• null receive notifications synchronously and
  recursively by default.
• queueScheduler allows to schedule quickly on a
  queue in the current event frame.
• asapScheduler efficiently schedule it on the
  microtask queue.
• asyncScheduler the concept is just the same as
  scheduling a task using setInterval.
• animationFrameScheduler relies on
  requestAnimationFrame API.

12

• 5. Interoperability
• As a result, Angular Promise and Observables
  differ greatly from one another. The major query,
  though, is whether we can combine the two. Or do
  we only get to choose one of them?
• Well, the answer is No.
• Observables can easily be created from Promise,
  and you can efficiently drop Observable into a
  Promise.
• Promises take only one value you have to choose
  if you want the first or last value to be dumped
  on the Promise.
• And if I talk about the rxjs library, it provides
  you with the firstValueFrom and lastValueFrom for
  that particular use case.

13
Conclusion

• The technical distinction between Angular Promise
  and Observable should be evident to you now. When
  to employ one or the other depends totally on
  your business use case.
• However, they will be important in resolving
  JavaScript's async paradigm. Observables are also
  inexpensive because the Browser doesn't already
  support them.
• We are a reputable AngularJS development company
  if you intend to create a reliable web
  application utilising the Angular framework. Our
  team of Angular developers is skilled in offering
  the best web app solutions for your company's
  requirements.

14
THANK YOU
Contact Us (91) 991-308-8360 / 1 (912)
528-5566 inquiry_at_albiorixtech.com livealbiorix.te
ch For More Information Visit Us
At www.albiorixtech.com