in Education by
How are observables different from promises in Angular?

1 Answer

0 votes
by

The first difference is that an Observable is lazy whereas a Promise is eager.

Promise Observable
Emits a single value Emits multiple values over a period of time

Not Lazy

Lazy. An observable is not called until we subscribe to the observable

Cannot be cancelled

Can be cancelled by using the unsubscribe() method
  Observable provides operators like map, forEach, filter, reduce, retry, retryWhen etc.



Consider the following Observable:

    
      const observable = rxjs.Observable.create(observer => {
        console.log('Text inside an observable');
        observer.next('Hello world!');
        observer.complete();
      });

      console.log('Before subscribing an Observable');

      observable.subscribe((message)=> console.log(message));
    
  

When you run the above Observable, you can see messages being displayed in the following order:

Before subscribing an Observable
Text inside an observable
Hello world!

As you can see, observables are lazy. Observable runs only when someone subscribes to them hence, the message “Before subscribing…” is displayed ahead of the message inside the observable.

Now let’s consider a Promise:

    
      const promise = new Promise((resolve, reject) => {
        console.log('Text inside promise');
        resolve('Hello world!');
      });

      console.log('Before calling then method on Promise');

      greetingPoster.then(message => console.log(message));
    
  

Running the above promise, the messages will be displayed in the following order:

Text inside promise
Before calling then method on Promise
Hello world!

As you can see the message inside Promise is displayed first. This means that a promise runs before the then method is called. Therefore, promises are eager.

The next difference is that Promises are always asynchronous. Even when the promise is immediately resolved. Whereas an Observable, can be both synchronous and asynchronous.

The above example of an observable is the case to show that an observable is synchronous. Let’s see the case where an observable can be asynchronous:

    
      const observable = rxjs.Observable.create(observer => {
        setTimeout(()=>{
            observer.next('Hello world');
            observer.complete();
        },3000)
      });

      console.log('Before calling subscribe on an Observable');

      observable.subscribe((data)=> console.log(data));

      console.log('After calling subscribe on an Observable');
    
  

The messages will be displayed in the following order:

Before calling subscribe on an Observable
After calling subscribe on an Observable
Hello world!

You can see in this case, observable runs asynchronously.

The next difference is that Observables can emit multiple values whereas Promises can emit only one value.

The biggest feature of using observables is the use of operators. We can use multiple operators on an observable whereas, there is no such feature in a promise.

Related questions

0 votes
    How are Angular expressions different from JavaScript expressions?...
asked Jun 30, 2021 in Education by JackTerrance
0 votes
    Top 30+ Angular - Routes and Forms Interview questions and answers...
asked Sep 10, 2021 in Education by JackTerrance
0 votes
    Can one make an angular application to render on the server-side?...
asked Jun 30, 2021 in Education by JackTerrance
0 votes
    What is the concept of Dependency Injection?...
asked Jun 30, 2021 in Education by JackTerrance
0 votes
    I have these routes /items/:id /items /items/:id/edit ... etc I want to put the component, to ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 3, 2022 in Education by JackTerrance
0 votes
    I have these routes /items/:id /items /items/:id/edit ... etc I want to put the component, to ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 26, 2022 in Education by JackTerrance
0 votes
    i have an Angular Factory that gets a single date from the backend of my spring application, and i ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    I have a json file contains a icons object like this: "icons" : { "logo" : "fa fa-caret-down ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 9, 2022 in Education by JackTerrance
0 votes
    I have three components - app, sideNav and wallForm. In the app header, I have a button that ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 10, 2022 in Education by JackTerrance
0 votes
    what i want : i have a config file where it contains some urls in .json file stored in asset ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 20, 2022 in Education by JackTerrance
0 votes
    This question already has answers here: How to split a string with angularJS (4 answers) Closed 5 years ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 14, 2022 in Education by JackTerrance
0 votes
    This question already has answers here: How to split a string with angularJS (4 answers) Closed 5 years ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 3, 2022 in Education by JackTerrance
0 votes
    I have used angular-cli with systemJS and am now comfortable with its build process,test cases & component ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 3, 2022 in Education by JackTerrance
0 votes
    This question already has answers here: How to split a string with angularJS (4 answers) Closed 5 years ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 19, 2022 in Education by JackTerrance
0 votes
    I have a split screen design. I'd like to access the folder ID from the parent route only when ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 30, 2022 in Education by JackTerrance
...