Rx： 更好的异步流程控制

javascript

https://www.youtube.com/watch?v=3LKMwkuK0ZE
https://www.youtube.com/watch?v=ei7FsoXKPl0

What is RxJS

RxJS is a library for composing asynchronous and event-based programs
Think of RxJS as Lodash for events.

Here should be some examples

const btn1$ = Observable.fromEvent($('.btn1'), 'click')
btn1$
 .scan(count => count + 1, 0)
 .subscribe((val) => {
   $('.text').text(`You have survived The Older for ${val} Seconds`)
  })
-------c-------c-----c-----|--->

Concept

• Observable (lazy push)
• Observer
• Operators
• Subscription

Observable

Think of it as Asynchronous Array、Promise、Function

value + timeline = Observable

Create an Observable

const observable = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
});
console.log('just before subscribe');
observable.subscribe({
  next: x => console.log(x),
  error: err => console.error('something wrong occurred: ' + err),
  complete: () => console.log('done'),
});
console.log('just after subscribe');
// logs
// just before subscribe
// 1..2..3
// just After subscribe
// 4
// done

Think as Promise

promise.then(
    successFn,
    errorFn
)
observable.subscribe(
    successFn,
    errorFn,
    completeFn
)

Without Operators, Observable are no scarier than Promise

Difference from Promise

Think as Function

function foo () {}
foo.call()
observable.susbscribe()

Functions dont do any thing until they are called
Observables dont do any thing utils they are subscribed

Observer

Observers are just objects with three callbacks, one for each type of notification that an Observable may deliver.

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
}

Operator

What Operator do i use ?

• http://reactivex.io/rxjs/
• Remember you dont have to rx everything
• Take the operators you know to whatever point you can
• Start with these: map、filter、scan、concat、merge、mergeMap、switchMap、combineLatest

Examples

Use RxJS where its best suited

• composing mutilple events together
• adding delay
• clientside rate limiting
• coordinating async tasks
• when cancellation is required

Do NOT use Rx when its not needed

• simple button clicks
• basic forms use
• Hello world apps

Thinking Reactively

• Work backwards
• Any variable can be observable
• Observables are just functions
• Observer chains do all the work
• Calling error() breaks the chain
• Just use Rx when it makes sence