RxJs for beginners #1 Observable

This article is for those who have never had experience in RxJS or don’t sure about basic concepts and want to consolidate their knowledge.

What should you have to start:

• Basic experience in Javascript;
• Code editor, I recommend you to use stackblitz online code editor, there are already preset for rxjs;

Observable

Observable is the main building block in rxjs, formal, Observable is a pattern of asynchronous programming where data is transferred through an event stream.

But try to think simpler, imagine you have a hollow pipe, you throw things in one end and catch it from another, that’s all that Observable does.

Let’s look at an example:

Line 1 — here we import Observable from rxjs library;

Line 3 — next let’s create a new instance of Observable. We need to put a callback function where we can get access to the observer object. Using observer object we are able to send messages (using the analogy of a pipe this is the same as throwing items from one side of the pipe).

Observer contains 3 methods:

• next — send a message any type (string, array, object …);
• error — send an error message (!!! after you call error, you Observable will stop sending any message);
• complete — send a complete message (!!! after you call error, you Observable will stop sending any message);

Lines 12 & 24 are similar — here we create a subscription. Using subscription we are able to receive messages (catch items from another side of the pipe) and react to them.

There are 2 ways what we can put as subscribe arguments. First — object with: next, error and complete methods, second — 3 callback functions in the order: nextCb, errorCb, completeCb;

So if the observer calls the next method, we will catch it in the next callback, if error — error callback, if complete — complete callback

!!!Important — each subscribe creates a new observer, so the callback you put into “new Observable()” constructor (line 3) will be created for every subscription, and runs each time when you call subscribe.

If you run this example you should receive the same result in the console.

Memory leaks

if your observable call complete and/or error methods you should have no worries, when one of these methods will be called your subscription will be automatically removed from your computer memory, but if you have observable that never call complete and/or error, (see example below), you have to clear it manually.

On lines 3–11 we have created “never-completed Observable”, all we have here it’s just an interval that messages the current iteration number.

On lines 3–15 we subscribe to our observable and log current into the console.

To prevent memory leak on line 17 we have created 5 seconds timeout when it will be triggered we call the special method “unsubscribe” which clears our subscription. (For example in Angular you usually do this in ngOnDestroy hook).

If you run this example you should have the same result as below:

But If you have a lot of subscription and you need to unsubscribe from all of them at one time, you can group them into one, as below:

Observable Real-life example

In the end, I want to demonstrate a small example of how you can use Observable in real life:

Here we have a function that makes HTTP requests and returns observable. If everything is okay we call the next method with data we received from the server, then complete, if we’ve got some error call error method.

In subscription on lines 14–18, we subscribe on observable and catch data we need. Because our observable does complete and/or error we don’t have to unsubscribe manually.

Thank you for reading, please leave any feedback, it will help me to improve this and future articles.