Angular Promise vs Observable: Ultimate Differences You Must Know

Ankur Akvaliya

CO-CTO

Published On: December 28, 2022

JavaScript strictly follows the asynchronous concurrent language and its engine instantly moves to execute the next statement without waiting for the concurrent statement to finish.

Such a concept is called the asynchronous function, and you need to deal with the callbacks approach. So, I know it’s a challenging task to manage the codes, making the callback hell.

Angular Promises and Observables are the one-stop solutions to overcome such situations. Their implementations help us deal with that asynchronous code more cleanly. However, they have different APIs, and their motivation is slightly different.

And we have come up with an article that depicts the technical difference between Angular promise vs Observable.

What is Promise in Angular?

One of the best ways to execute asynchronous functions in your application that typically uses callbacks is opting for promise in Angular development.

The promise in Angular takes place while emitting and completing (resolving or rejecting) one value at a time. So if you’re using an Angular promise, it becomes easy for you to emit a single event from the API.

Then, the controller’s (directive) sole responsibility is to register up to three callbacks – success, error, and notifications.

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 AngularJS developers 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.

Get Custom-Tailored Web App Development Solutions For Your Business Needs

We strictly adhere to the standard software development lifecycle to provide the best possible IT solutions for your business success.

Contact Us

What is an Observable in Angular?

Observables are preferable to Angular promise as they allow you to run functions asynchronously and synchronously. Furthermore, it means that you can deliver multiple values over time with the help of Observables.

Such values are actively responsible for handling 0, 1, or multiple events, and that too by using the same API for every event. The excellent part of Angular Observables is the number of operators actively simplifying coding, including retry(), replay(), map, forEach, reduce and others.

With the help of Observables, the first thing that you need to perform is to have a subscription to start emitting values. If you do not perform this step, it’s just a blueprint of code responsible for handling future emits.

Related Post: Resolver in Angular

Angular Promise vs Observable: Differences You Must Know

Now, it’s high time to see the technical differences between Angular Promise vs Observable. I have gathered the list of examples to clarify doubts about the difference between Angular Promise and Observables.

1. Angular Promise handles one value; Observables handles multiple values.

   One of the significant differences between Observable vs Angular Promise is that you are now allowed to change the fulfilled value. So instead, you can just emit (either reject or resolver) a single value for your Angular application.

   To understand this concept, you need to have basic information of what is Angular.

   And if I talk about Observables, you can freely emit multiple results. The subscriber will receive results until the observer is completed or unsubscribed.

   Let’s see an example of handling values in terms of Angular Promise vs Observable.

   Copy

   // Promises
   const x = new Promise((resolve) => {
       setInterval(() => {
           // ✅ when resolve is called, the promise will become
           // fullfilled and it's value won't ever change
           resolve(Math.random() * 10)
       }, 3000);
   });
   
   // Observables
   const observable$ = rxjs.Observable.create((observer) => {
     // ✅ you can pass multiple values by using `next` method
     observer.next(1);
     observer.next(2);
     observer.next(3);
     observer.complete();
   })
   
   // ✅ base will be receiving values untils it's completed
   observable$
       .subscribe(
         v => console.log(v),
         err => console.log(err),
         done => console.log("completed")
       );

   Observables are responsive tools that quickly listen to data streams. In addition, there exists a bidirectional kind of Observable: Subjects, and they are a perfect use case for those web sockets. The RxJS library helps you to deal with shipping with a thin wrapper on web sockets.

   import { webSocket } from “rxjs/webSocket”;

   We crafted web and mobile application that allows users to easily search for a car by entering the essential car options, colour specifications, and location.

   View Our Project

2. Observable subscriptions are cancellable; promises aren’t

   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, it’s 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.

   Yes, you’ll 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.

   Let’s go through an example to demonstrate it.

   Copy

   // ✅ 1. Cancelling by using the unsubscribe method
   const observable1$ = rxjs.interval(1000);
   const subscription1$ = observable1$
     .subscribe(x => console.log(x));
   
   subscription1$.unsubscribe();
   
   // ✅ 2. Cancelling by taking a number of elements
   const observable2$ = rxjs.interval(1000);
   
   observable2$
     .pipe(rxjs.operators.take(5))
     .subscribe(x => console.log(x));
   
   // ✅ 3. Conditionally stop listineing for more elements
   const subject3$ = new rxjs.Subject();
   const observable3$ = rxjs.interval(1000);
   
   observable3$
     .pipe(rxjs.operators.takeUntil(subject3$))
     .subscribe(x => {
       console.log(x);
       if (Math.random() > 0.5) {
         subject3$.next(1);
         subject3$.complete();
         console.log('complete');
       }
     });

   The operators of Observable are essential as it allows you to compose declaratively complex asynchronous operations quickly.

   Planning To Develop a Robust Single-Page Application?

   Our Angular development team has core expertise in designing and building feature-rich applications for all your business needs.

   Contact Us

   

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.

   Let’s 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.

   I’ll make it easier for you by demonstrating it with a good example.

   Copy

   const foo = new Promise((resolve) => {
     console.log('1. Callback execution');
     resolve(true);
   });
   
   foo.then(() => {
     console.log('2. Promise resolution');
   });
   
   console.log('3. Pre exit method statement');
   
   // ✅ console output
   // 1. Callback execution
   // 3. Pre exit method statement
   // 2. Promise resolution
   
   const observable$ = new rxjs.Observable(observer => {
     console.log('1. Execution of observable body');
     observer.next(1);
     observer.complete();
   });
   
   console.log('2. Pre Subscribe statement');
   
   observable$.subscribe(() => {
     console.log('3. Execution of subscribe callback')
   });
   
   // ✅ console output
   // 2. Pre Subscribe statement
   // 1. Execution of observable body
   // 3. Execution of subscribe callback

   The above example depicts the sequence that typically occurs: 1. Callback execution and 1. Execution of observable body.

4. Runtime execution

   Once ES Promises enters the resolved state, it becomes pretty easy for you to queue the callback in the microtask queue. Simply put, the execution takes place after the current macro task has been completed.

   Let’s see an example:

   Copy

   console.log('1. Start');
   
   setTimeout(() => {
       console.log('2. Timeout callback')
   }, 0);
   
   Promise.resolve().then(() => {
       console.log('3. Promise callback')
   });
   
   console.log('4. End');
   
   // ✅ outputs
   // 1. Start
   // 4. End
   // 3. Promise callback
   // 2. Timeout callback

   You can’t change the above behavior.

   Related Post: Angular Ivy

   Observables enable you to effortlessly fine-tune the runtime execution by strictly using schedulers. The primary role of a scheduler is to control the state, especially when a subscription starts and you receive notifications for the same.

   • null: You’ll receive notifications synchronously and recursively by default.
   • queueScheduler: It allows you to schedule quickly on a queue in the current event frame.
   • asapScheduler: You can efficiently schedule it on the microtask queue. And also, it uses the same queue as promises use.
   • asyncScheduler: This concept is just the same as scheduling a task using setInterval. So, you need to schedule it in the macro task queue.
   • animationFrameScheduler: relies on requestAnimationFrame API.

   I’ll demonstrate an example by using asapScheduler:

   Copy

   const observable1$ = rxjs.interval(1000)
     // ✅ using the asapScheduler scheduler
     .pipe(rxjs.operators.observeOn(rxjs.asapScheduler));
   
   const subscription1$ = observable1$
     .subscribe(x => console.log(x));
   

5. Interoperability

   So, we have seen a lot of differences between Angular Promise and Observables. But the biggest question here is whether we can use both together. Or do we have to select only one of them?

   Well, the answer is No.

   • Observables can easily 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.

Let me demonstrate you with a simple example.

// ✅ Observable -> Promise
const source$ = rxjs.interval(2000).pipe(rxjs.operators.take(10));
// toPromise is deprecated in favor of firstValueFrom and lastValueFrom
// outputs 9
const result = await source$.toPromise();

// ✅ Promise -> Observable
const promise = Promise.resolve(10);
rxjs.from(promise)
  // outputs 10
  .subscribe(item => console.log(item));

Conclusion

I hope you clearly understand the technical difference between Angular Promise and Observable. It entirely depends on your business use case on when to use one or the other.

But they are going to play a vast role in solving the async paradigm in JavaScript. Moreover, observables are cost-effective as the Browser does not natively support them.

If you’re planning to develop a robust web application using the Angular framework, we are a renowned AngularJS development company. We have a team of Angular developers who are proficient in providing the best possible web app solutions for your business needs.