How Observable works in RxJS?

What is Observable?

Observable is a like a stream which allow to pass zero or more events or values  and you can subscribe each using a callback function.

Why Observables are so important?

In almost all UI when user do some interactions with it you can see the same progression. for example

  • You are listening an event
  • You are making an asynchronous request to the server and may be you are follow up with some transformations or Animations

Observables are capable of modeling all the above things together with a very little code.

In order to understand how Observable works , look at the sample code

var observable = Observable.create(function(observer) {
var sum = 0;
for (var i = 1; i <= 4; i++) {
if (i <= 3) { sum = sum + i; observer.next(i); //You can emit each item from the observable also } if (i === 4) { setTimeout( i => {
observer.next(sum);
observer.complete();
},
5000,
i
);
}
}
});

In this sample code, I am running a for loop and emit each value by using observer.next(value) , when the value of i become 4 you can see emiting the sum of 3 numbers and exiting the all observable sequence by simple calling observable.complete();

Observables are lazy which means , the above code never executes unless you are subscribing it.

Let’s subscribe the Observable to get each value. I am removing the lambda expression to understand more clearly

observable.subscribe({
next: function(x) {
console.log("got value " + x);
},
error: err => console.error("something wrong occurred: " + err),
complete: function() {
//when I become 4 it will complete
console.log("completed");
}
});

In the callback function of next , you will get all the values emitted from the Observable sequence including sum as final value and finally execute the complete callback function.

You can simply receive each value like the below syntax also instead of specify next explicitly

observable.subscribe(function(x) {
//here you will get all the value including sum
console.log(x);
});

Let me tell you one more scenario with the same sample by simply commenting one line of code. I am not emitting each value instead I want to emit the sum only from the observable and complete.

var observable = Observable.create(function(observer) {
var sum = 0;
for (var i = 1; i <= 4; i++) {
if (i <= 3) { sum = sum + i; //commented the code } if (i === 4) { setTimeout( i => {
observer.next(sum);
observer.complete();
},
5000,
i
);
}
}
});

Now when you subscribe , you will have only one value , that is sum

observable.subscribe(function(x) {
//here you will the sum
console.log(x);
});

Official Documenation to learn about RxJS features
https://www.learnrxjs.io/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s