What is the difference between Promises and Observables?

Question

What is the difference between Promise and Observable in Angular?

An example on each would be helpful in understanding both the cases. In w

Answer 1

The basic difference between observable and promises are:

Answer 2

Promise:

• Provide a single future value;
• Not lazy;
• Not cancellable;

Observable:

• Emits multiple values over time;
• Lazy;
• Cancellable;
• Supports map, filter, reduce and similar operators

You can use promises instead of observables when calling HTTP in Angular if you wish.

Answer 3

While the accepted answer is good in general I don't think it emphasises that when dealing with Angular Components you almost always want to use an Observable because it supports cancelation. Promises cannot be cancelled and will resolve even if your component is destroyed. Angular tends to be forgiving until it's not.

For example any manual change detection on a destroyed component will cause an exception:

ngOnInit() {
  // promise api
  this.service.getData().then(d => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });

  // observable api
  this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });
}

If your component is destroyed before the promise is resolved, you'll get an attempt to use destroyed view error when the promise is resolved.

Alternatively, if you use observables with the takeUntil pattern, then as soon as your component is destroyed the subscription will be cancelled.

This is a bit of a contrived example but executing code for a component that is destroyed is probably going to lead to bugs. Unless you actually want to do that for some reason :p

Answer 4

1. Promises are focused only for single values or resolves, observables are stream of data.

2. Observables can be canceled but promises can't be canceled.

The least known one, atleast to me is

3. Promises are always of asynchronous nature, but observables can be both synchronous and asynchronous.

Answer 5

Promise

A Promise handles a single event when an async operation completes or fails.

Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn't so far.

Observable

An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event.

Answer 6

Something I ran into that wasn't apparent from a first reading of the tutorial and docs was the idea of multicasting.

Make sure you're aware that by default, multiple subscriptions will trigger multiple executions in an Observable. Multiple subscriptions to a single HTTP call Observable will trigger multiple identical HTTP calls unless you .share() (enable multicasting).

A promise forces you to deal with one thing at a time, unwrap its data, handle exceptions, has language support for cool things like async/await, and is pretty barebones otherwise.

An Observable has lots of bells and whistles, but you need to understand the power you're working with or it can be misused.