Once you understand what are Observables, understanding Observers will be a piece of cake. You can try to answer this question: Who is the consumer of the data that is coming from Observables?
Newsletters and you
We said that for many aspects, an Observable is like a newsletter. We need to subscribe to it to start receiving some data/emails.
You are the consumer of those emails. Generally speaking, you can have two situations:
- The email is ok. It means it has some content in it. In this case, you can perform some action on it (reading, forwarding, etc.)
- The email is not ok. It means it has a problem (error). Then you may want to do something different.
This is super simple. Either an email is ok or it is not (for whatever reason).
Observables and Observers
If you are the Consumer of emails from a newsletter, Observers are the consumers of data from an Observable.
An Observable will always deliver one of the following three types of values, called notifications:
- next()
- error()
- complete()
If the Observable delivers error or complete, no more values will be delivered. When the Observable delivers complete we know that there is no more data coming.
“An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next, error, and complete.“, rxjs.dev.
“Observers are just objects with three callbacks, one for each type of notification that an Observable may deliver“.
const observer = {
next: x => console.log('Observer got data: ' + x),
error: err => console.error('Observer got an error: ' + err),
complete: () => console.log('Observer got a complete notification'),
};Observers in practice
The only callback you must provide in an Observer is next(). If you don’t provide one of the other callbacks, some types of notifications will be ignored because there is not a callback for those types.
In practice, we rarely pass an Observer object as an argument to subscribe(). More commonly, you will see code that provides the next callback as an argument to the subscribe method without an observer object.
myObservable.subscribe(x => console.log('Observer got data: ' + x));This is possible because RxJS will create an Observer object using the callback argument as the next handler behind the curtains.
Following this pattern, we can pass the three methods to the Observable
myObservable.subscribe(
data => console.log('Observer got data: ' + data),
error: err => console.error('An error occurred: ' + err),
complete: () => console.log('That's all, folks!'),
);In the last example, the first argument is the next method, the second argument is the error method and the last argument is the complete method.
Key Points
- An Observer is an object with three callbacks that consumes values delivered by an Observable
- We call the subscribe method on the Observable and we pass in an Observer that reacts each time a notification is emitted
Hands-on-1: Create an Observable