How are Angular Observables different from JavaScript Promises?

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

What is Eager and Lazy loading?

• Loading: The eager loading technique is the default module-loading strategy. Eager loading feature modules are loaded before the program begins. This is primarily utilized for small-scale applications.

• Lazy Loading: Lazy loading loads the feature modules dynamically as needed. This speeds up the application. It is utilized for larger projects where all of the modules are not required at the start.

Promise vs Observable

1. Emits a single value Emits multiple values over a period of time.

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

3. Cannot be cancelled Can be cancelled by using the unsubscribe() method.

4. 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 free widgets for websites with codes 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 angular image gallery 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.