RxJS Observables

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:

import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
  subscriber.next(10);
  subscriber.next(20);
  subscriber.next(30);
  setTimeout(() => {
    subscriber.next(40);
    subscriber.complete();
  }, 1000);
});

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:

import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
  subscriber.next(10);
  subscriber.next(20);
  subscriber.next(30);
  setTimeout(() => {
    subscriber.next(40);
    subscriber.complete();
  }, 1000);
});

console.log('These are the values just before subscribe');
observable.subscribe({
  next(x) { console.log('We have got value ' + x); },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('Done successfully'); }
});
console.log('This value is just after subscribe');

Output:

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:

function foo() {
  console.log('Hello World!');
  return 123;
}
const x = foo.call(); // same as foo()
console.log(x);
const y = foo.call(); // same as foo()
console.log(y);

Output:

You will see the following output:

"Hello World!"
123
"Hello World!"
123

Let's write the same example, but with Observables:

import { Observable } from 'rxjs';
const foo = new Observable(subscriber => {
  console.log('Hello World!');
  subscriber.next(123);
});
foo.subscribe(x => {
  console.log(x);
});
foo.subscribe(y => {
  console.log(y);
});

Output:

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:

Creating Observables
Subscribing to Observables
Executing Observables

Creating Observables

There are two ways to create observables:

Using the Observable constructor method
Using Observable create() method

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.

testrx.js file:

import { Observable } from 'rxjs';
var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("This is my first Observable")
   }
);

You can also create Observable using, Observable.create() method as follows:

import { Observable } from 'rxjs';
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("This is my first Observable")
   }
);

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:

Syntax:

See the above example with subscribe:

testrx.js file:

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("This is my first Observable") 
   }
);
observer.subscribe(x => console.log(x));

Output:

Executing Observables

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:

testrx.js file:

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("This is my first Observable");
         subscriber.next("Testing Observable");
         subscriber.complete();
      } catch(e){
         subscriber.error(e);
      }
   }
);
observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is completed now."));

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.

Output: