RxJS 使用手册
2017-08-10 本文已影响1400人
Transnet2014
手册
基础的 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))