美文网首页
RxJS(一)

RxJS(一)

作者: 蒋小花_4b6c | 来源:发表于2020-04-01 18:12 被阅读0次

    RxJS是web中热门的库之一,

      * 它提供强⼤的功能性⽅法来处理事件 简化代码

      * 一方面很有用,很好用,一方面学习 RxJS 和响应式编程很难,

      * 它有着众多的概念,⼤量的表层 API 和从 命令式到声明式⻛格的思维转换

      * 以下是一些较常用到的API

    一、关于发出值的操作

    1.interval

    间隔给定时间发出数字序列

    只能传入一个参数

    const source = Rx.Observable.interval(1000);

    const subscribe = source.subscribe(

        val => console.log(val)

    );

    // 每隔1s发出从0开始的数字

    // 0 1 2 3 ……

    2.timer

    间隔给定时间发出数字序列

    可传入多个参数

    第一个参数,表示第一次间隔的时间;

    第二个参数,表示第二次间隔的时间;

    第三个参数,表示第三次间隔的时间;

    最后一个参数,表示值后间隔的时间

    const sourceTime = Rx.Observable.timer(1000, 2000);

    3.delay

    延迟N时间 后发出值

    const source = Rx.Observable.delay(3000);

    4.delayWhen

    满足条件才发出值

    const message = Rx.Observable.interval(1000);

    const delayForFiveSeconds = () => Rx.Observable.timer(5000);

    const delayWhenExample = message.delayWhen(delayForFiveSeconds);

    const subscribe = source.subscribe(   

        val => console.log(val)

    );

    // 5s后发出  1 2 3 ……

    5.of

    按顺序发出值

    const source = Rx.Observable.of(

        {name: 'HELLO'},

        [1, 2, 3],

        function hello() { return 'hello'; }

    );

    const subscribe = source.subscribe(

        val => console.log(val)

    );

    // 输出:  {name: 'Brian},  [1,2,3],  function hello() { return 'Hello' }

    二、关于对已经发出的值进行操作

    6.take

    从发出的值中选择前N个

    const source = Rx.Observable.interval(1000);

    const example = source.take(5);

    const subscribe = example.subscribe(

        val => console.log(val)

    );

    // 0 1 2 3 4

    7.map

    此处的map作用和js中是一样的

    //js:

    var array = [1, 4, 9, 16];

    const newArray = array.map(x => x * 2);

    // newArray : [2, 8, 18, 32]

    // rxjs:

    const source = Rx.Observable.map([1, 2, 3, 4, 5]);

    const example = source.map(val => val + 10);

    const subscribe = example.subscribe(

        val => console.log(val)

    ); // 11,12,13,14,15


    8.mapTo

    将发出的每一个元素,转化成指定的信息

    const source = Rx.Observable.interval(2000);

    const example = source.mapTo('Hello World');

    const subscribe = example.subscribe(

        val => console.log(val)

    );

    //Hello World   Hello World   Hello World  ……


    9.combineAll

    将所有发出的值组合后,一次性发出

    const source = Rx.Observable.intervabl(1000).take(5).map(val => val + 10);

    const example = source.combineAll();

    const subscribe = example.subscribe(

        val => console.log(val)

    );

    10.combineLatest

    把最后一个值组合起来作为数组发出

    const source1 = Rx.observable.interval(1000).take(2);

    const source2 = Rx.observable.interval(1000).take(5);

    const example = Rx.Observable.combineLatest(source1, source2);

    每次分享10个,循序渐进,嘻嘻

    相关文章

      网友评论

          本文标题:RxJS(一)

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