RxJS 笔记 08

参考 简书原文 作者：readilen

1 Operators

1-1 take 取前几个元素后就结束

// source : -----0-----1-----2-----3--..
//                 take(3)
// example: -----0-----1-----2|
var source = Rx.Observable.interval(1000);
var example = source.take(3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 0
// 1
// 2
// complete

1-2 first 取 observable 送出的第 1 个元素之后就直接结束，行为跟 take(1) 一致。

// source : -----0-----1-----2-----3--..
//                 first()
// example: -----0|
var source = Rx.Observable.interval(1000);
var example = source.first();

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

// 0
// complete

1-3 takeUntil 让一个 observable 直送出 完成(complete)讯息

// source : -----0-----1-----2------3--
// click  : ----------------------c----
//                 takeUntil(click)
// example: -----0-----1-----2----|
var source = Rx.Observable.interval(1000);
var click = Rx.Observable.fromEvent(document.body, 'click');
var example = source.takeUntil(click);     

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 0
// 1
// 2
// 3
// complete (点击body了

1-4 concatAll

// click  : ------c------------c--------
//
//         map(e => Rx.Observable.of(1,2,3))
//
// source : ------o------------o--------
//                \            \
//                  (123)|       (123)|
//
//                    concatAll()
//
// example: ------(123)--------(123)------------
var click = Rx.Observable.fromEvent(document.body, 'click');
var source = click.map(e => Rx.Observable.of(1,2,3));

var example = source.concatAll();
example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

// source : (o1                 o2      o3)|
//            \                  \       \
//             --0--1--2--3--4|   -0-1|   ----0|
//
//                 concatAll()        
//
// example: --0--1--2--3--4-0-1----0|
var obs1 = Rx.Observable.interval(1000).take(5);
var obs2 = Rx.Observable.interval(500).take(2);
var obs3 = Rx.Observable.interval(2000).take(1);

var source = Rx.Observable.of(obs1, obs2, obs3);

var example = source.concatAll();

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 0
// 1
// 2
// 3
// 4
// 0
// 1
// 0
// complete