JavaScript Observable is a function that “creates an observer and attaches it to the source where the values are expected from”. Observables create a pub-sub system based on the observable design pattern. This makes observables popular with async programming.
Observables are simply data streams or collections which arrive at a time. Observables are objects that can notify subscribers when a change is happening. We can wrap Observables as an object which contains the following things.
- Data Streams
- Some methods (next(), error(), complete())
Syntax
Observable JavaScript does not have any particular syntax, it is a class that is defined in JavaScript’s RxJS library and imported as below:
import { Observable } from 'rxjs';
How to create an Observable in JavaScript
To create an Observable in JavaScript, you can use the “Observable constructor” and pass the subscribe() function as an argument.
import {Observable} from 'rxjs-es';
let obs = new Observable(observer => {
setTimeout(() => {
observer.next('hello')
},2000);
});
We imported an observable library and then created a new instance of an observable by invoking a new keyword.
Subscribe Observable
An Observable represents a sequence of values that may be observed. When an observer subscribes to an Observable, the observer will start receiving values from the Observable.
import {Observable} from 'rxjs-es';
let obs = new Observable(observer => {
setTimeout(() => {
observer.next('hello')
observer.complete();
},2000);
});
obs.subscribe(data => console.log(data),
(error) => console.log(error),
() => console.log('Done')
);
Output
hello
Done
Execute Observable
You can subscribe to an Observable using its subscribe()
method. This method takes three arguments, all optional: a function to handle data emitted by the Observable, a function to handle errors emitted by the Observable, and a function to run when the Observable completes.
import {Observable} from 'rxjs-es';
let obs = new Observable(observer => {
setTimeout(() => {
throw 'an error';
},2000);
});
obs.subscribe(data => console.log(data),
(error) => console.log(error),
() => console.log('Done')
);
Output
Uncaught an error
Unsubscribe from an Observable
To unsubscribe from an observable in JavaScript, you must have a Subscription object. This is the object returned from every Observable.subscribe() call. You can call the unsubscribe() method on the Subscription object to cancel Observable executions and release resources.
import {Observable} from 'rxjs-es';
let obs = new Observable(observer => {
setTimeout(() => {
observer.next('hello');
},2000);
return () => {
console.log('Disposal called');
}
});
let object = obs.subscribe(data => console.log(data),
(error) => console.log(error),
() => console.log('Done')
);
object.unsubscribe();
Output
Disposal called
We unsubscribed the subscriber, and we no longer get the data. Instead, we got the confirmation that we had unsubscribed the data.
Observables as functions in JavaScript
import { Observable } from 'rxjs';
const observe = new Observable(subscriber => {
console.log('Observables can act as functions');
subscriber.next(21);
});
observe.subscribe(i => {
console.log(i);
});
observe.subscribe(j => {
console.log(j);
});
Output
Observables can act as functions
21
Observables can act as functions
21
That’s it for the JavaScript Observables.