Touch RxJs

[renjie1996]

hello world

a = 1
b = 2
 
c = a + b // current value：c = 3
 
a = 2 // current value still：c = 3 

when use RxJs

a$ = 1
b$ = 2
 
c$ = a$ + b$ // current value：3
 
a$ = 2 // current value like vue computed：4

Concept

Observable

Observable is actually an asynchronous array

Observable = TimeLine + Array

when using Observable

We can make a function return multiple times, which is very different from the original javascript function.

let foo = Rx.Observable.create(observer => {
  observer.next('hello, rxjs');
});
 
foo.subscribe(x => console.log(x)); //  'hello, rxjs'
foo.subscribe(y => console.log(y)); //  'hello, rxjs'

You can also create an event stream that prints the event object when the user clicks it.

let clicks = Rx.Observable.fromEvent(document, 'click');
clicks.subscribe(x => console.log(x));

observer

observer is an Object .By default, the callback in subscribe will be placed in next.

let observer = {
    next() {},
    complete() {},
    error() {},
};

Remember the promise we used so often, two states, resolve and reject. In observer we can manually execute Observer.complete () and Observer.error () to control the process.

let foo = Rx.Observable.create(observer => {
  observer.next(123);
  observer.next(456);
  observer.complete();
  observer.next(789);
});
 
foo.subscribe(x => console.log(x)); // 123 456, then nothing

subscription

Subscription is the return value after subscribe

let observable = Rx.Observable.interval(1000);
let subscription = observable.subscribe(x => console.log(x));
 
setTimeout(() => {
  subscription.unsubscribe();
}, 3100)

like can Interrupting Promise