Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Understanding Observables

Sunday, October 29th, 2017 by Servage

Advanced Javascript development - Part 4Observables are heavily used in frameworks like Angular. Observables are especially useful in cases where you have to respond to an event but don’t know in advance when that event is going to take place. Therefore, you can set up an observable and one or more observers that listen to the event.

What Are Observables?

Observables are one of the two main objects in the observer design pattern. In the observer pattern, observables are objects that one or multiple objects listen to for events they are interested in. The listening objects are called observers.

How Observers Work

For example, you can connect a button to an observable, and whenever the button is clicked, the observable notifies all observers that the button has been clicked. The notification can also contain any information related to the event. Usually a function is called on the observer when an event occurs, and the additional information is passed as an argument of any type such as a string or object. Only the observers that have explicitly set to listen to the event are notified. The process of setting up a new listening observer is called subscribing to the observable.

Asynchronous Tasks

Observables are commonly used to handle asynchronous tasks. Some events, such as sending HTTP requests, take time to complete. To prevent an application from having to wait for a long task to complete, you can use observables that work in the background.

Instead of sending an synchronous HTTP request, you can do it inside an observable. Let’s have a quick look at how this works in JavaScript. The RxJS package that you can install using npm has an Observable class. You can call the create() method to create a new observable. Here is an example using TypeScript: const observable = Observable.create((observer: Observer) => {}). Inside the ES6 arrow function, you can create your HTTP request.

When the request has returned some data, call the observer.next() method and pass the result as an argument in any format you want. It can be a string, integer or even object. Calling this method will notify all subscribed observers that an event has taken place. You can call the method multiple times if you want to emit an event more than once from the same observable. When all tasks have been completed and you no longer want to send any data to observers, call observer.complete() to notify all observers that no further data will be sent from the observable.

This was a brief introduction to observables in JavaScript. If you want to know more about the RxJS API that is used in this example and in Angular for example, the official www.reactivex.io website has more information for you.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.