• rxjs入门5之创建数据流


    一 创建同步数据流

    1.creat
    Observable.create = function (subscribe) {
    return new Observable(subscribe);
    };
    
    2.of:列举数据
    of(1,2,3).pipe(filter(curr=>curr>=2)).subscribe(console.log);
    //2
    //3
    
    3.range:指定范围
    range(1,100).pipe(map(value=>value)).subscribe(console.log); //从1到100的所有正整数
    //1
    //2
    //...
    //3
    
    4.generate:循环创建

    generate类似⼀个for循环,设定⼀个初始值,每次递增这个值,直到满⾜某个条件的时候才中⽌循环,同时,循环体内可以根据当前值产⽣数据。⽐如,想要产⽣⼀个⽐10⼩的所有偶数的平⽅。

    const source$ = Observable.generate(
    2, // 初始值,相当于for循环中的i=2
    value => value < 10, //继续的条件,相当于for中的条件判断
    value => value + 2, //每次值的递增
    value => value * value // 产⽣的结果
    );
    
    三个极简的操作符:empty、never 和 throw

    1.empty:empty就是产⽣⼀个直接完结的Observable对象,没有参数,不产⽣任何数据,直接完结,下⾯是⽰例代码:

    const source$ = Observable.empty();
    
    

    2.never:never产⽣的
    Observable对象就真的是什么都不做,既不吐出数据,也不完结,也不产⽣错误,就这样待着,⼀直到永远。

    const source$ = Observable.never();
    

    3.throwError:throwError产⽣的Observable对象也是什么都不做,直接出错,抛出的错误就是throw的参数,下⾯是使⽤throw的⽰例代码:

    const source$ = Observable.throwError(new Error('Oops'));
    

    never、empty和throw单独使⽤没有意义,但是,在组合Observable对象时,如果需要这些特殊的Observable对象,这三个操作符可以直接使⽤,例如,根据条件是否产⽣出错的数据流如

    const source$ = Observable.never();
    $source.concat(shouldEndWell? Observable.empty() : Observable.throw(new Error()));
    

    创建异步数据流

    1.interval 和 timer

    interval:interval接受⼀个数值类型的参数,代表产⽣数据的间隔毫秒数,返回的Observable对象就按照这个时间间隔输出递增的整数序列。

    interval(1000).pipe(take(10),map(value=>value + 1)).subscribe(console.log);  //每隔1s返回 从2开始依次递增,take(10)代表取10个数据值,到输出10 结束
    

    timer :timer(2000,1000)还⽀持第⼆个参数,如果使⽤第⼆个参数,那就会产⽣⼀个持续吐出数据的Observable对象,类似interval的数据流。第⼆个参数指定的是各数据之间的时间间隔,从被订阅到产⽣第⼀个数据0的时间间隔,依然由第⼀个参数决定

    const source$ = Observable.timer(2000, 1000);//source$被订阅之后,2秒钟的时刻吐出0,然后3秒钟的时刻吐出1,4秒钟的时刻吐出2……依次类推:
    
    2.from :可以把一切转化为Observable

    from可能是创建类操作符中包容性最强的⼀个了,因为它接受的参数只要“像”Observable就⾏,然后根据参数中的数据产⽣⼀个真正的Observable对象。
    比如:数组,类数组,字符串,⼀个JavaScript中的generator也很像Observable,Promise 对象...

    function * generateNumber(max) {
        for (let i=1; i<=max; ++i) {
            yield i;
        }
    }
    const source$ = Observable.from(generateNumber(3));
    
    const promise = Promise.resolve('good');
    from(promise).subscribe(
        console.log,
        error => console.log('catch', error),
        () => console.log('complete')
    );
    //结果:
    //good
    //complete
    

    Promise对象虽然也⽀持异步操作,但是它只有⼀个结果,所以当Promise成功完成的时候,from也知道不会再有新的数据了,所以⽴刻完结了产⽣的Observable对象。当Promise对象以失败⽽告终的时候,from产⽣的Observable对象也会⽴刻产⽣失败事件

    3.fromEvent

    如果从事⽹页开发,fromEvent是最可能会被⽤到的操作符,因为⽹页应⽤总是要获取⽤户在⽹页中的操作事件,⽽fromEvent最常见的⽤法就是把DOM中的事件转化为Observable对象中的数据.fromEvent的第⼀个参数是⼀个事件源,在浏览器中,最常见的事件源
    就是特定的DOM元素,第⼆个参数是事件的名称,对应DOM事件就是click、mousemove这样的字符串.

    <div>
    <button id="clickMe">Click Me</button>
    <div id="text">0</div>
    </div>
    
    let clickCount = 0;
    fromEvent(document.querySelector('#clickMe'), 'click').subscribe(
        () => {
            document.querySelector('#text').innerText = ++clickCount
        }
    );
    
    4.ajax

    详情请见 ajax在项目中的封装

    defer

    在创建之时并不会做分配资源的⼯作,只有当被订阅的时候,才会去创建真正占⽤资源的Observable,之前产⽣的代理Observable会把所有⼯作都转交给真正占⽤资源的Observable。这种推迟占⽤资源的⽅法是⼀个惯⽤的模式,在RxJS中,defer这个操作符实现的就是这种模式。

    const observableFactory = () => Observable.of(1, 2, 3);
    const source$ = Observable.defer(observableFactory);
    
    const observableFactory = () => Observable.ajax(ajaxUrl);
    const source$ = Observable.defer(observableFactory);
    
    
  • 相关阅读:
    ionic2 开始第一个App(二)
    简单的文件下载方法
    php获取汉字首字母
    LumiSoft.Net邮件接收乱码问题解决
    输入框字符限制插件·
    微软相关产品集合的网站,感觉找软件很方便 也很全 收藏了
    利用发射 下拉列表绑定枚举
    ASP.NET中UpdatePanel内控件的JS失效的问题
    Json格式转string
    SQL 判断是否存在时间交叉
  • 原文地址:https://www.cnblogs.com/honkerzh/p/10858233.html
Copyright © 2020-2023  润新知