RxJS – Part 2 – Observable

Observable creation

In the first post we saw how we can work with simple data sources and create an Observable from them. In this post we will see how can create Observable using various sources and methods available on Observable object.

Some methods available on Observable object that we can use to create new Observables are:

• from() – we pass in anything array like, a Promise, an iterable object or another Observable-like object
  
• fromEvent() – we pass in event target and event name, we can also pass in options for event listener
• fromPromise() – we pass in Promise
  
• of() – We pass in value or list of values as parameters. If we pass in multiple parameters it will emit them immediately one after another
• create() – we pass in function that has an Observer object as its parameter. It will execute once an Observer subscribes to it. This one is more low level and enables us to do more things with Observable

These are not only methods that will enable us to create Observable objects, there are others as well. Also, there are other ways to create an observable but more about that later on.

In the next few sections we will see how we can use some of the mentioned methods.

 

Observable sequence from arguments

Lets see how we can actually make use of Observable.of() method. As stated in documentation this method creates an Observable that emits some values you specify as arguments, immediately one after the other, and then emits a complete notification.

We take in arguments – 4 strings and we map them to a new Observable by appending ‘ RxJS’ string for every element. We will get the output as we would expect:

 

 

Using Observable.interval

This method creates an Observable that emits sequential numbers every specified interval of time. Time is expressed  in miliseconds.

This will keep producing values every 1 second. Values go from 0 and they increment by 1.

We could take only first 10 by using take() operator:

 

Observable and events

Mouse move event is another good example where we can use RxJS. As we move the mouse Observable will trigger the next() method and will do so infinitely as long as mouse is moving. That means we can use Observable to observe that event. And there is a method for that purpose on the Observable object – fromEvent().

Here is an example:

Why do we convert event to an Observable? What is the point? Well, events and Observables are quite similar. Observable is a sequence of values that a Producer pushes to the Observer. However, Observable can signal that it has run to completion and will not send any data after. And also we can use all the operators that RxJS provides for us. Furthermore, with RxJS we can traverse an Observable event just like we traverse an array:

This code sample will keep logging mouse events to console forever.

We could only take 10 of these by using take() operator again:

 

Using create method

Create method will enable us to have more possibilities and interact directly with Observer object:

As we can see create() method takes a function as its only parameter. And that function has observer as its parameter. Then we can interact with Observer object and invoke all methods on it. Whenever we call one of those methods those will be executed for every subscriber separately.

Therefore, one important thing to be aware of is that we can have multiple subscribers to any Observable.

Lets say we have multiple subscribers and they all have their own separate implementations for next()method.  All of them will be called independently.

An example should make things clear:

And the output:

We got almost the same output for both subscribers. However, those subscribers could do totally different logic and produce different outputs.

 

Observables and Promises

Lets look at example of simple promise:

The output we get is as expected:

inside of success callback! value: Success!

What is interesting though is that Observables are lazy by default and code that they wrap will start executing only after someone subscribes. Lets see an example:

This code produces the following output:

Promise starts

After we subscribe to an observable it will of course start executing:

Now we get the following output:

Promise starts

Observable starts

in next, value:  Observable - after timeout of 1500 miliseconds!


Observables can also also wrap the promise and then we can apply fancy RxJS operators to it. We will see some examples in one of the next posts.

 

Summary

In this post we saw that we can use various methods to create an Observable. As a source of creation we can use an array or any object that is array-like. We can also create an observable from an Iterable or Observable-like object. Another thing RxJS enables us is dealing with events. We accomplish that with Observable.fromEvent() method. Also we can create an observable from Promise or even from primitive values.

We used create()method to do some level interaction with Observer object. Also, we saw that on any given Observable we can have multiple subscribers. And they all can be doing their own independent implementations of Observer object.

That is all for now. In next post we will talk about Hot and Cold Observable.

RxJS Series Navigation:

Previous post: << RxJS – Part 1 – Introduction
Next post: RxJS – Part 3 – Hot and Cold Observable >>