RxJS学习笔记

  响应式编程是一种面向数据流和变更传播的异步编程范式(Wikipedia)。RxJS(响应式扩展的 JavaScript 版)是一个使用可观察对象进行响应式编程的库,它让组合异步代码和基于回调的代码变得更简单 (RxJS Docs)。

  RxJS 提供了一种对 Observable 类型的实现,直到 Observable 成为了 JavaScript 语言的一部分并且浏览器支持它之前,它都是必要的。这个库还提供了一些工具函数,用于创建和使用可观察对象。这些工具函数可用于:

  • 把现有的异步代码转换成可观察对象
  • 迭代流中的各个值
  • 把这些值映射成其它类型
  • 对流进行过滤
  • 组合多个流

  让我接受的最基本的用法解释:

    RxJS中的流以Observable对象呈现,获取数据需要订阅Observable,形式如下:

    const  ob  =  http$.getSomeList();  //getSomeList()返回某个由‘Observable’包装后的http请求。

    ob.subscribe((data)  =>  console.log(data));  //使用内部定义的subscribe方法来订阅数据,然后打印出该数据。

    //在变量末尾加$表示Observable类型的对象

  而与ECMAScript6中的promise方法类似:

    const  promise  =  http.getSomeLIst(); //返回由‘promise’包装的http请求。

    promise.then((data)  =>  console.log(data));  //then是promise内部定义的方法

  而实际上Observable可以认为是加强版的Promise,它们之间是可以通过RxJSAPI互相转换的:

    const  ob  =  Observable.fromPromise(somePromise);  //Promise转为Observable

    const  promise  =  someObservable.toPromise();  //Observable转为Promise

能让我理解的知识才是最好的知识:

  Observable被称为可观察序列,简单来说数据就在Observable中流动,你可以使用各种operator对流进行处理,例如:

  const  ob  =  Observable.interval(1000);

  ob.take(3).map(n  =>  n*2).filter(n  =>  n>0).subscribe(n  =>  console.log(n));

第一步代码我们通过类方法interval创建了一个Observable序列,ob作为源会每隔1000ms发射一个递增的数据,即0 -> 1 -> 2。第二步我们使用操作符对流进行处理,take(3)表示只取源发射的前3个数据,取完第三个后关闭源的发射;map表示将流中的数据进行映射处理,这里我们将数据翻倍;filter表示过滤掉出符合条件的数据,根据上一步map的结果,只有第二和第三个数据会留下来。

上面我们已经使用同步编程创建好了一个流的处理过程,但此时ob作为源并不会立刻发射数据,如果我们在map中打印n是不会得到任何输出的,因为ob作为Observable序列必须被“订阅”才能够触发上述过程,也就是subscribe(发布/订阅模式)。

  上面代码中我们给subscribe传入了一个函数,这其实是一种简写,subscribe完整的函数签名如下,包含三个自定义函数next、error和complate:

ob.subscribe({    next: d => console.log(d),   error: err => console.error(err),    complete: () => console.log('end of the stream')   })

直接给subscribe传入一个函数会被当做是next函数。这个完整的包含3个函数的对象被称为observer(观察者),表示的是对序列结果的处理方式。next表示数据正常流动,没有出现异常;error表示流中出错,可能是运行出错,http报错等等;complete表示流结束,不再发射新的数据。在一个流的生命周期中,errorcomplete只会触发其中一个,可以有多个next(表示多次发射数据),直到complete或者error

observer.next可以认为是Promisethen的第一个参数,observer.error对应第二个参数或者Promisecatch

RxJS同样提供了catch操作符,err流入catch后,catch必须返回一个新的Observable。被catch后的错误流将不会进入observererror函数,除非其返回的新observable出错。

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

swap空间的增减方法

(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap

Tukey‘s test方法 异常值

如何计算异常值(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fzh.wikihow.com%2F%25E8%25AE%25A1%25E7%25AE%2597%25E5%25BC%2582%25E5%25B8%25B8%25E5%2580%25BC)

RxJS学习笔记 - HelloWorld