In this post you will learn the difference between observables and promises. When people start learning Angular they don't understand why we need observables if in plain Javascript and other frameworks like React or Vue we used promises and everything was easy and fine.

Why do we need RxJS? Why do we need observables? These are valid questions. But it leads to the problem that a lot of people don't want to learn RxJS and observables. They simply try to convert all their observables to promises and work with them in a way how they used to work previously.

This is a wrong approach. Observables and RxJS are core components of Angular and it makes a lot of sense to use them correctly.

export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('http://localhost:3000').subscribe(console.log)
    this.http.get('http://localhost:3000').toPromise().then(console.log)
  }
}

Here we have 2 lines where we make http request to API. By default inside Angular we get an observable from http.get. With the observable we write subscribe which will be called after our API call is finished.

But typically people want to use something they are familiar with this is why they simply use toPromise to convert any observable to promise. After this they can write .then to get data. This will work in this specific case when we do an API call but it is not an Angular way.

The biggest difference between observable and promise is that observable is a stream of data. It can deliver new data multiple times. Promise gets data back only once.

The second important point is that we can cancel observable but we can't cancel promises. As a result of our .subscribe we are getting subscription and we can unsubscribe from it.

const sub = this.http.get('...').subscribe(...)
sub.unsubscribe()

We can't do something like this with promises. There are some specs that it will be possible in the future but we don't have it now.

Additionally to that promise doesn't have inside any methods to transform promises. We simply write then and we write the whole logic that we need with plain Javascript inside.

With observables and RxJS we have hundreds different operators that we can use. Like map, filter, takeUntil and others.

const username$ = this.user$.pipe(filter(Boolean), map(user => user.name))

Here we write a value in our username$ stream only when our user is not undefined and then we map it to get back only a name.

RxJS does in the same direction with data transformations like Lodash or Ramda but for async stuff.

Next difference is that observables and lazy and promises not. If we create observable and don't write .subscribe nothing happens. But when we create promise it automatically starts.

this.http.get('http://localhost:3000')
this.http.get('http://localhost:3000').toPromise()

First line won't execute anything but second does.

The last difference is that when we have some errors in observables we get it inside our subscribe method. If we have some error inside a promise we are getting it inside .then in our child promise.

Conclusion

So these were all differences between observables and promises but I think people have lots of confusion just because they start to work with Observables on HTTP requests. Typically use are getting response only once. Which actually means that it doesn't show any differences between observables and promises.

But it is important to understand that we can use observables not just with HTTP but with anything else. It can be mouse event on the screen, it can be a stream of your data or it can be an API call. And you can combine all of them together.

Observables are not just used for HTTP calls and I highly recommend you to use just observables and never promises inside Angular

And actually if you want to improve your Angular knowledge and prepare for the interview I highly recommend you to check my course Angular Interview Questions - Coding Interview 2023.