Observable (Computing)
An observable is one of the key components of reactive programming and was a proposed standard for managing asynchronous data in ECMAScript 2017.[citation needed] An observable can be defined as a collection where data arrives over time and thus opening up a channel for continuous asynchronous communication. The concept of observables is based on the classic observer design pattern, one or many observer's can subscribe to the observable and get notified whenever the observable is updated.[1]
Composition with Reactive Operators
The real power of observables comes from the array like operations that allow to transform, combine, manipulate and work with the sequence of items emitted by the observables.[2]
The reactive operators allow to compose asynchronous sequences together in a declarative manner with all the efficiency benefits of callbacks but without the drawbacks of nesting callback handlers that are typically associated with asynchronous systems.
Observables in Angular
Angular makes extensive use of observables through RxJs library for various common asynchronous tasks, listed below are few examples[3]:
- The EventEmitter class extends observable.
- The HTTP module uses observables to handle AJAX calls.
- The Router module provides events in the navigation process as observables.
- Reactive Forms module uses observables to monitor form control values.
Comparison with Promises
Observables are often compared to promises as both these techniques are primarily used for handling asynchronous tasks, however below are the key differences[4]:
- In observables computation does not start until subscription, Promises execute immediately on creation.
- Observables provide multiple values over time, Promises provide only one.
- Observables differentiate between chaining and subscription. Promises only have .then() clauses.
