Rxjs的使用详解

这次给大家带来rxjs的使用详解,使用rxjs的注意事项有哪些,下面就是实战案例,一起来看一下。

一个可观察对象的执行期间,零个到无穷多个next通知被发送。如果Error或者Complete通知一旦被发送,此后将不再发送任何值。

可观察对象严格的坚守这个契约,所以,下面的代码将不会发送包含数值4的next通知

var observable = Rx.Observable.create(function subscribe(observer) {observer.next(1);observer.next(2);observer.next(3);observer.complete();observer.next(4); // Is not delivered because it would violate the contract});

登录后复制

不失为一个好方式的是,使用try/catch语句包裹通知语句,如果捕获了异常将会发送一个错误通知。

var observable = Rx.Observable.create(function subscribe(observer) {try {observer.next(1);observer.next(2);observer.next(3);observer.complete();} catch (err) {observer.error(err); // delivers an error if it caught one}});

登录后复制

取消订阅  unsubscribe()

由于可观察对象的执行可能是无限的(不停地next),而对于观察者来说却往往希望在有限的时间内终止执行,因此我们需要一个API来取消执行。

var observable = Rx.Observable.from([10, 20, 30]);var subscription = observable.subscribe(x => console.log(x));// Later:subscription.unsubscribe();

在你订阅了之后,你将会得到一个Subscription对象,它表示正在进行的执行。大胆的去使用unsubscribe()去终止执行吧。

observer观察者

什么是观察者?观察者是可观察对象所发送数据的消费者,观察者简单而言是一组回调函数 , 分别对应一种被可观察对象发送的通知的类型:next, error和complete。下面是一个典型的观察者对象的例子:

var observer={next:x=>console.log('Observer got a next value: ' + x),error: err => console.error('Observer got an error: ' + err),complete: () => console.log('Observer got a complete notification')}

登录后复制

观察者不过是三个回调函数组成的对象,每个回调函数分别对应可观察对象的通知类型。

Subscription订阅

订阅对象也可以被放置在一起,因此对一个订阅对象的unsubscribe()进行调用,可以对多个订阅进行取消。做法是:把一个订阅”加”进另一个订阅。

var observable1 = Rx.Observable.interval(400);var observable2 = Rx.Observable.interval(300);var subscription = observable1.subscribe(x => console.log('first: ' + x));var childSubscription = observable2.subscribe(x => console.log('second: ' + x));subscription.add(childSubscription);setTimeout(() => {// Unsubscribes BOTH subscription and childSubscriptionsubscription.unsubscribe();}, 1000);

登录后复制

执行之后,我们可以在控制台得到:

second: 0first: 0second: 1first: 1second: 2

登录后复制

订阅也有一个remove(otherSubscription)方法,用于解除被add添加的子订阅。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

相关阅读:

js-xlsx的工具类库xlsxUtils的使用详解

JS的日常常用函数整合

以上就是Rxjs的使用详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2783762.html

(0)
上一篇 2025年3月8日 16:54:25
下一篇 2025年3月8日 16:54:31

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS修改元素display属性实例代码

    当我们想要使用js来控制元素 display 属性来使其显示或者隐藏时,需要将 display  属性作用在行间样式上,本文主要和大家分享js修改元素display属性实例代码,希望能帮助到大家。 并使用 ID 选择器 即  在JS文件中,…

    编程技术 2025年3月8日
    200
  • JS脚本判断在客户端大小和文件类型方法实例

    本文主要和大家分享JS脚本判断在客户端大小和文件类型方法实例, 用JS脚本在客户端判断大小和文件类型!兼容ie6,ie7,ie8 ,Google Chrome,ff等浏览器,希望能帮助到大家。 var isIE = /msie/i.test…

    编程技术 2025年3月8日
    200
  • js锚点滚动实例分享

    配合bootstrap写出的。下面是干货: ul 的每个li的每个a中的href指向锚点目标,比如说 Home。 下面给出我发现好的源代码: $(‘#navbar-menu ul li a[href^=”#”]’).click(functi…

    编程技术 2025年3月8日
    200
  • JS如何控制二级联动

    本文主要和大家分享JS如何控制二级联动,在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份,将这个省份下的城市列出,希望本文能帮助到大家。 1、需求 在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下…

    2025年3月8日
    200
  • 原生js代码实现商品筛选方法

    本文主要和大家分享原生js代码实现商品筛选方法,用到的知识:js基础、dom、第一种方法用到的是js中的数组方法,第二种方法用到的是json和for-in以及es6。 实现步骤 1、根据数据结构生成HTML结构(利用dom操作) 2、获取每…

    编程技术 2025年3月8日
    200
  • js对象深度克隆实例详解

    克隆对象在开发过程中经常会遇到,有些时候需要浅克隆,有些时候需要深克隆,本文主要和大家分享js对象深度克隆实例详解,希望能帮助到大家。 // 深度克隆function deepClone(origin, target) {var targe…

    编程技术 2025年3月8日
    200
  • js中比较运算符应如何科学使用

    这次给大家带来js中比较运算符应如何科学使用,科学使用js中的比较运算符注意事项有哪些,下面就是实战案例,一起来看一下。 比较运算符 关系运算符最常用的类型是比较运算符,它们用于确定两个值的相对顺序。比较运算符是: 小于()>运算符求…

    编程技术 2025年3月8日
    200
  • js之innerHtml简易日历的实现

    本文主要和大家分享js之innerHtml简易日历的实现,思路同选项卡差不多, 希望能帮助到大家。 1、对于最下面文字的更改,可以使用数组,把他们的内容都放到一个数组中,然后使用字符串的拼接来实现 2、innerhtml是用来设置标签内的文…

    编程技术 2025年3月8日
    200
  • 细说js,php对象数组的差别以及json的使用

    在日常的开发中大家都知道js的对象和数组跟php的对象和数组都差不多,但是还是有不同点的,不了解js,php对象和数组差别在哪的同学可以一起来看看本篇文章,还有json数据的使用哦!废话不多说了,我们一起来看看吧! JS对象结构: 创建一个…

    编程技术 2025年3月8日
    200
  • angularjs中$apply()的使用详解

    这次给大家带来angularjs中$apply()的使用详解,使用angularjs中$apply()的注意事项有哪些,下面就是实战案例,一起来看一下。 nbsp;html>        Document    {{a}}     …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论