Fusion of Observables with Observer

RxJs is an incredible tool for reactive programming, and today we’re going to understand briefly about what Observables and observers are.

OBSERVABLES

• Observables are wrapping around of some data source like a stream of values of any type which are typically used for asynchronous data.
• It is used for transfer of messages between publisher and subscriber and that message could be anything like literals, messages, or any kind of event depending upon context.
• In other words, Observable is just a function with a few special characteristics. Which takes observer as an object with (next, error and complete method) and return its cancellation logic.
• Observables are declarative i.e for that we need to define a function for publishing values but they are not executed until a consumer subscribes to it because of the reason that observables are lazy.

Example: Creation of Observable using static method Observable.of ()

const createObserver = Observable.of(10,20,30);

OBSERVERS

An observer is used to executing some code whenever we receive some values or get some error or when the process is done or completed.

Generally, Observers are used to handle values (data) which it receives from observables using its 3 types of handlers(Methods) are described below:

1: next(): The next will be called by observer whenever the new values are emitted, and during its execution, there can be infinite no of calls to observer.next(). (Required)

2: error(): This method will be called when observer throws an error. (Optional)

3: complete(): This method will be called when we know there are no more values are available to subscribe, and the execution immediately stops and no more data will be delivered to the subscribers. (Optional)

Example:

const createObservable = new Observable(observer => {
  observer.next(12);
  observer.next(24);
  observer.next('Learning Observables with observer');
  observer.complete();
});

Observers are used to connecting to observables and we do it using subscription i.e, by calling its subscribe method. Which means Observable keep on publishing values and using subscribe method we subscribing or listening to those values.

​​Note : If you don’t supply any of the above mentioned handler then observer ignores that type of notification.

For better understanding lets starts with its implementation.

1: Let starts with the import statements first :

import {Component, OnInit} from '@angular/core';
import {Observable, Observer} from 'rxjs';

RxJs (Reactive extensions for javascript) is a library for reactive programming which is mainly used for asynchronous code, and provide an environment for implementing Observables.

2: Now we’ll create an Observable constructor for creating an observable stream of any data and takes subscriber function as an argument.

//Creation of observable
    const createObservable = new Observable(observer => {
	observer.next(12);
        observer.next('Learning Observables with observer');
        observer.next(24);
	observer.complete();
    });

Synchronously deliver values 12, 24,’Learning Observables with observer’ and then complete.

3: Now we subscribe to our Observable using subscribe() (subscribe will invoke our observable).

createObservable.subscribe({
  next: value => console.log('Next value is: ' + value),
  error: err => console.log('Something went wrong' + err),
  complete: () => console.log('Data execution completed')
});

As You can see in above example observable are created using the new Observable() call and then it is subscribed by an observer which is executed by calling the next().

Note: The observer is never passed through until an subscribe method is invoked.

UNSUBSCRIBE OBSERVABLES

Observable execution can run for an infinite amount of time, and we need to find some way to stop it from further execution. It is necessary to unsubscribe the observables because it leads to wastage of memory. All you need to do is to call unsubscribe().

RESULT

I hope this short article will help you in understanding the use of Observables with observers, and to dive deeper into it refer to angular docs click here