Post
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.
https://gist.github.com/Ibro/4c00925df5f2aadd508f400ad9cdb725
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.
https://gist.github.com/Ibro/78b2f5353393110adf076a085b2de048
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:
https://gist.github.com/Ibro/fdd57af6cb94c13f942cf44c23640bdd
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:
https://gist.github.com/Ibro/4545747ad99a4d45f343ee9ecc36e515
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:
https://gist.github.com/Ibro/aa2430381c5d1ca99cb856c2abc94066
This code sample will keep logging mouse events to console forever.
We could only take 10 of these by using take() operator again:
https://gist.github.com/Ibro/34355803d2b43d143ce05cd6f6c45583
Using create method
Create method will enable us to have more possibilities and interact directly with Observer object:
https://gist.github.com/Ibro/6d6bf6ca4ac8d46d3099dceb458157e7
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:
https://gist.github.com/Ibro/3fb95c61cbc308660f0ed993c2d099f6
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:
https://gist.github.com/Ibro/abcae31e7eab39e5377850a7679e518a
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:
https://gist.github.com/Ibro/9ed6a8c9bcad724d2c49ce83848d8a8e
This code produces the following output:
Promise starts
After we subscribe to an observable it will of course start executing:
https://gist.github.com/Ibro/79afa5dfe7d9df90bfffca69282ac35f
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.