美文网首页
RxJS 使用手册

RxJS 使用手册

作者: Transnet2014 | 来源:发表于2017-08-10 20:32 被阅读1400次

    手册

    基础的 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 使用手册

          本文链接:https://www.haomeiwen.com/subject/nokkrxtx.html