In RxJS, the complete flow of a data stream needs to contain at least Observable and Observer. Observable is the observer, Observer observer, Observer subscription Observable, Observable Observer to push data to complete the process.
It can be said a complete RxJS data stream is an interactive game between Observable and Observer.
Observable design patterns to achieve the following two:
Observer mode
iterative mode
Because not writing design patterns, so a passing interest can facie own related books, need to mention is that any kind of design patterns are references to solve a particular type of problem. Complex problems, often not by a design pattern can solve alone, but also need to combine a variety of design patterns, and RxJS Observable is a combination of the observer mode and iterator pattern.
Interactive Observale and the Observer
subscription
First we create a Observable, as a data source
const { Observable } = rxjs; const sourceObservable$ = new Observable(observer => {
observer.next('hello');
observer.next('rxjs');
});Then set a observer, as a subscriber
const Observer = { next: res => console.log(res)
};Finally Observer subscription Observable, data begins to flow
sourceObservable$.subscribe(Observer); // hello
// rxjsA very simple data stream is complete.
State transfer
In the above example, the next which only one state, data is continuously transferred to the downstream, in practice, data flows in the flow process there are three states:
next, the next state to normal flow
error, to capture the abnormal flow abort
Complete, the data stream has been completed, the flow terminates
The change followed the above code, make up the other two state
const sourceObservable$ = new Observable(observer => {
observer.next('hello');
observer.error('the data is wrong!');
observer.next('rxjs');
observer.complete();
}); const Observer = { next: res => console.log(res), error: err => console.log(err), complete: () => console.log('complete!')
}
sourceObservable$.subscribe(Observer); // hello
// the data is wrong!Now look Observer is not the kind of deja vu? Yes, Observer is actually an iterator up.
At this point, not difficult to find, interactive process is actually Observable and Observer, Observer injected by the observer mode to Observable an iterator, by next cursor control data source Observable data flow, and will be based on the actual flow that may occur during the state to transfer error or complete.
unsubscribe
Observable and Observer have now subscribe through established contact, but sometimes we need to put this off contact, such as when the components destroyed. This time you need to cancel the subscription, see the following example
const sourceObservable$ = new Observable(observer => { let number = 1;
setInterval(() => {
observer.next(number++);
}, 1000);
}); const Observer = { next: res => console.log(res), error: err => console.log(err), complete: () => console.log('complete!')
} const subscription = sourceObservable$.subscribe(Observer);
setTimeout(() => { // 取消订阅
subscription.unsubscribe();
}, 4000); // 1
// 2
// 3
// 4Note that, in this example, although unsubscribe, but as sourceObservable $ data source does not end, because never call the complete method, but no longer receive push Observer of the data
In order to facilitate the observation of differences, we will change it sourceObservable $
const sourceObservable$ = new Observable(observer => { let number = 1;
setInterval(() => { console.log('subscribe:' + number);
observer.next(number++);
}, 1000);
}); // subscribe: 1
// 1
// subscribe: 2
// 2
// subscribe: 3
// 3
// subscribe: 4
// 4
// subscribe: 5
// subscribe: 6
// ...Hot Observable和Cold Observable
Suppose we have a scenario where Observable is a two ObserverA, ObserverB has subscribed to N seconds apart, then the data before ObserverB whether it needs to receive a subscription?
In fact, there is no fixed answer, whether to receive according to the actual business scenarios to be, precisely because of this, so there will be some Hot Observable and Cold Observable.
Hot Observable: heat is the object of observation is similar to live, what you see is from the moment you open the broadcast began, and before the content has been missed. Subscribe to only receive data that begins the moment.
Cold Observable: Cold observed objects, similar to the recording and broadcasting, what you see is you open the first seconds of the beginning of the video. Every subscription will begin receiving data from scratch
Look under Hot Observable, each subscription to push only the current data, the data is not reset at each push subscription, as follows:
// 先产生数据
let number = 1; const sourceObservale$ = new Observable(observer => { let num = number;
setInterval(() => {
observer.next(num++);
number = num;
}, 1000);
}); const ObserverA = ObserverB = { next: item => console.log(item), error: err => console.log(err), complete: () => console.log('complete!')
}
sourceObservale$.subscribe(ObserverA);
setTimeout(() => {
sourceObservale$.subscribe(ObserverB);
}, 2000); // 1 => A
// 2 => A
// 3 => A
// 3 => B
// 4 => A
// 4 => B
// ..For Cold Observable, are each subscription to re-start the push, it is reset each time subscription data push, as follows:
const sourceObservale$ = new Observable(observer => { // 订阅时产生数据
let number = 1;
setInterval(() => {
observer.next(number++);
}, 1000);
}); // 中间不变
... // 1 => A
// 2 => A
// 3 => A
// 1 => B
// 4 => A
// 2 => B
// ..Can also be seen here, is Observable inert evaluated only done in the internal logic subscribed when the Cold Observable goes further, without being subscribed, even the data not generated. 
Rui Jiang Yunguan website link: http://www.eflycloud.com/#register?salesID=6DGNUTUAV