Observables

Observables in rxjs (Reactive Extensions for JavaScript):

⇒ Observables are used to handle asynchronous data and perform asynchronous operations. We can perform asynchronous data by using Promises or Observables.

⇒ A Promise provides all data at once, whereas an Observable streams the data in packets. A Promise will return the data even if there is no one to use it.

⇒ However, an Observable will return the data only when someone subscribes to it. A Promise is native to JS.

⇒ A observable is not a feature of JS or Angular but is provided by a 3rd party library rxjs. An observable is a function which converts an ordinary stream of data into an Observable stream of data.

⇒ Observable is a wrapper around an ordinary stream of data. An Observer is something which uses the Observable data in order to use the data of Observable the Observer must subscribe to the Observer.

⇒ Observables are constructs to which we subscribe to be informed about changes in data.

⇒ It is not an angular or TS/JS feature. It is a feature of rxjs.

⇒ Eg: params is an observable. We subscribe to it, but do not unsubscribe, because angular does it for us.

⇒ But we need to unsubscribe to the observables created by us to prevent memory leaks.

Creating our own Observables:

Here, we are creating our own observable.

⇒ We need to import Observable from rxjs.

⇒ Here ‘myObserver’ is the ‘observer’ that is interested in knowing the changes happening.

⇒ We are using a setInterval because we can produce new changes every second.

⇒ Using the next() method we are passing the value to the observer.

⇒ Now the observer receives new data every second with the help of setInterval.

⇒ And, we need to subscribe to our own Observable and now we can receive the data from it and we are logging it in the console.

⇒ Also, we need to unsubscribe it in the onDestroy method.

⇒ For this we need to store the subscription in a variable of type Subscription which is imported from the rxjs.

⇒ This whole thing is the behind the scenes of an observable we use. Example for an built-in observable is params.

⇒ Like the next(), we have error()

Here we wrote a condition for error. If the count is greater than 3 it emits an error instead of emitting the data to myObserver via next().

⇒ Now, we can catch the error inside the subscribe() method likewise we use to catch the data from the myObserver.

The output will be like this. After reaching 3, it throwed the error.

⇒ Finally there is one method left which is complete()

The complete() method is an indication of success.

If we call the complete() method, it stops the execution peacefully.

⇒ This is the third argument in the subscribe() method.

⇒ This receives no arguments. That is why it is an empty bracket function. () ⇒ { }

⇒ An important point to note is, if the process stops due to an error(), it is not considered as complete().

⇒ (i.e) , if an error occurs before the complete() method, the completed will not be printed in the console. Only the error message will be printed.