In order to understand the difference between a Subject and an Observable, you need to be aware of two distinct concepts
– A data producer
– A data consumer
An observable, by definition is a data producer. Albeit a special kind that can produce data over time.
A Subject on the other hand can act as both — a data producer and a data consumer.
This implies two things.
1. A subject can be subscribed to, just like an observable.
2. A subject can subscribe to other observables.
That being said, there is one critical difference between a subject and an observable.
All subscribers to a subject share the same execution of the subject. i.e. when a subject produces data, all of its subscribers will receive the same data. This behavior is different from observables, where each subscription causes an independent execution of the observable.
Lets see some examples
var subject = new Rx.Subject();
// Here the subject is acting like a data producer
// because it is being subscribed to
subject.subscribe(v => console.log('consumer A: ' + v));
subject.subscribe(v => console.log('consumer B: ' + v));
// Create a source of the data, which in our case is an observable
var observable = Rx.Observable.from([0, 1]);
// Here the same subject acs as a data consumer because it
// can subscribe to another observable
source.subscribe(observable);
/* Prints */
// Consumer A: 0
// Consumer B: 0
// Consumer A: 1
// Consumer B: 1
There are a few important things to notice about this example.
1. I had to setup my subscriptions before my subject subscribed to the source.
2. Both the consumers logged the same value for v.
The fact that our consumers log the same data implies that the broadcasted data is shared with all the consumers/subscribers. This is unlike observables, where each consumer/subscriber causes the observable function to be re-executed.
Lets see another example to clarify this.
Example 1
Vanilla observable, independent execution
var observable = Rx.Observable.create(function(source) {
source.next(Math.random());
});
observable.subscribe(v => console.log('consumer A: ' + v));
observable.subscribe(v => console.log('consumer B: ' + v));
/* Prints DIFFERENT values for both consumers */
// consumer A: 0.25707833297857885
// consumer B: 0.8304769607422662
Example 2
Observable wrapped in a subject, causing shared execution
var observable = Rx.Observable.create(function(source) {
source.next(Math.random());
});
var subject = new Rx.Subject();
subject.subscribe(v => console.log('consumer A: ' + v));
subject.subscribe(v => console.log('consumer B: ' + v));
observable.subscribe(subject);
/* Prints SAME values for both consumers */
// consumer A: 0.8495447073368834
// consumer B: 0.8495447073368834
You can also manually broadcast data from a subject to it observers using the next() function as shown below.
var subject = new Rx.Subject();
subject.subscribe(v => console.log('consumer A: ' + v));
subject.next('hello world');
/* Prints */
// consumer A: hello world
I hope this post effectively takes you a step closer towards getting comfortable with using Subjects and Observables in your projects with confidence.
1172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
