In RxJS, an observable is a function that is used to create an observer and attach it to the source where values are expected from. For example, clicks, mouse events from a DOM element or an Http request, etc. are the example of observable.
In other words, you can say that observer is an object with callback functions, which is called when there is interaction to the Observable. For example, the source has interacted for an example, button click, Http request, etc.
Observables can also be defined as lazy Push collections of multiple values. Let's see a simple example to understand how observables are used to push the values.
See the following example:
In the above example, there is an observable that pushes the values 10, 20, 30 immediately and synchronously when subscribed, but the value 40 will be pushed after one second since the subscribe method has called.
If you want to invoke the observable and see the above values, you have to subscribe to it. See the following example:
When we execute the above program, we shall the following result on the console:
Observables are generalizations of functions
We know that observables are functions that act as clicks, mouse events from a DOM element or an Http request, etc. but observables are not like EventEmitters, nor are they like Promises for multiple values. In some cases, observables may act like EventEmitters, namely when they are multicasted using RxJS Subjects, but usually, they don't act like EventEmitters.
Observables are like functions with zero arguments, but generalize those to allow multiple values.
Let's see an example to understand this clearly.
A simple example of a function:
You will see the following output:
"Hello World!" 123 "Hello World!" 123
Let's write the same example, but with Observables:
You will see the same output as above:
You can see this because both functions and Observables are lazy computations. If you don't call the function, the console.log('Hello World!') won't happen. Also, with Observables, if you don't "call" it with subscribe, the console.log('Hello World!') won't happen.
Working of an Observable
There are three phases in an observable:
There are two ways to create observables:
Using the Observable constructor method
Let's create an observable using the observable constructor method and add a message, "This is my first Observable" using subscriber.next method available inside Observable.
You can also create Observable using, Observable.create() method as follows:
Subscribing to Observables
Subscribing to an observable is like calling a function. It provides callbacks where the data will be delivered to.
You can subscribe to an observable by using the following syntax:
See the above example with subscribe:
An observable is executed when it is subscribed. There are generally three methods in an observer that are notified:
next(): This method is used to send values like a number, string, object etc.
complete(): This method doesn't send any value. It indicates that the observable is completed.
error(): This method is used to notify the error if any.
Let's see an example where we have created the observable with all three notifications and execute that example:
The error method is invoked only if there is an error. When you run the above code, you will see the following output in the console.