RxJS 使用手册

手册

基础的 Rx 使用非常直观。

转换成 Observable

使用构造操作符能够轻松创造出一个 Observable 对象。

// 来自可枚举列表
Rx.Observable.of('foo','bar')

// 来自数组
Rx.Observable.from([1,2,3])

// 来自事件
Rx.Observable.fromEvent(#btn, 'click')

// 来自 Promise
Rx.Observable.fromPromise($http.get('/abc.do'))

// 来自标准回调
let observableExist = Rx.Observable.bindCallback(fs.exist);
observableExist('file.txt').subscribe(existed=>console.log('File existed? ", existed))

// 来自Nodejs回调
let observableRename = Rx.Observable.bindNodeCallback(fs.rename)
observableRename('file.text', 'file2.text').subscribe(()=>console.log('Rename success'))

创建 Observable

除了从其他事件中转换,手动创建也未尝不可。

let ob = new Rx.Subject();
ob.subscribe(value=>console.log('Value: '+value))

// 外部填充事件
ob.next('Hello fuchao')
let ob = Rx.Observable.create(ob=>{
    // 内部填充数据流
    ob.next('hello')
    ob.next('fuchao')
})

ob.subscribe(value=>console.log(value))

控制数据流动

let input = Rx.Observable.fromEvent(#input, 'input')

input.filter(event=>event.target.value > 2)
    .map(event=>event.target.value)
    .subscribe(value=>console.log(value))
    
    
input.delay(200)
    .map(event=>event.target.value)
    .subscribe(value=>console.log(value))
    
input.throttleTime(200)
    .map(event=>event.target.value)
    .subscribe(value=>console.log(value))
    
input.debounceTime(200)
    .map(event=>event.target.value)
    .subscribe(value=>console.log(value))
    
input.take(3)
    .map(event=>event.taget.value)
    .subscribe(value=>console.log(value))
    
let stop = Rx.Observable.fromEvent(#btn, 'click')

input.takeUnitl(stop)
    .map(event=>event.target.value)
    .subscribe(value=>console.log(value))

输出值

let input = Rx.Observable.fromEvent(#input, 'input')

input.map(event=>event.target.value)
    .subscribe(value=>console.log(value))
    
input.pluck('target', 'value')
    .subscribe(value=>console.log(value))

input.pluck('target', 'value').pairwise()
    .subscribe(value=>console.log(value))

input.pluck('target', 'value').distinct()
    .subscribe(value=>console.log(value))

input.pluck('target', 'value').distinctUntilChanged()
    .subscribe(value=>console.log(value))

你可能感兴趣的:(RxJS 使用手册)