RxJS(一)

2020-04-01  本文已影响0人  蒋小花_4b6c

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个,循序渐进,嘻嘻

上一篇下一篇

猜你喜欢

热点阅读