RXJS中Subject, BehaviorSubject, ReplaySubject, AsyncSubject的区别?

这篇具有很好参考价值的文章主要介绍了RXJS中Subject, BehaviorSubject, ReplaySubject, AsyncSubject的区别?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在RxJS(Reactive Extensions for JavaScript)中,Subject、BehaviorSubject、ReplaySubject和AsyncSubject都是Observable的变体,它们用于处理观察者模式中的不同场景。以下是它们之间的主要区别:

1、Subject:
是一种特殊的Observable,同时也是观察者。可以通过调用next()方法向Subject中推送新的值。
在订阅Subject时,可以接收到订阅之后产生的值。
没有初始值,也没有缓存历史值的功能。
RXJS中Subject, BehaviorSubject, ReplaySubject, AsyncSubject的区别?,前端,angular.js,typescript
上面例子就比较容易理解:

  • 我们创建了一个Subject
  • 发出了一个值1,但由于此时并没有订阅者,所以这个值不会被订阅到
  • 创建了订阅者 A
  • 又发出一个值 2,这时候订阅者 A 会接收到这个值
  • 又创建一个订阅者 B
  • 最后发出一个值 3,这时候已经订阅的都会接收到这个值

2、BehaviorSubject:
是一种特殊的Subject,具有初始值。
在订阅时,会立即收到当前的值,然后在之后每次Subject发出新值时,订阅者都会收到更新后的值。
保留并提供对当前值的访问。
RXJS中Subject, BehaviorSubject, ReplaySubject, AsyncSubject的区别?,前端,angular.js,typescript
这段代码做了那些工作呢?

  • 我们首先创建了一个BehaviorSubject的实例behavior$,并在实例化时传入初始值 0。
  • 然后我们订阅了这个这个实例behavior$,由于BehaviorSubject的特点是把最新的值发布给订阅者,订阅者 A 会得到初始值 0,所以就会打引出订阅者 A,订阅值为:0
  • behavior$使用内置的next方法发出一个新的值 1,这时候订阅者 A 将会收到新的值,打印出订阅者 A,订阅值为 1
  • 我们增加一个订阅者 B,这时候它会得到最新的值 1,所以打印结果为订阅者B,订阅值为 1
  • 最后我们再一次调用behavior$的next方法,由于我们之前已经订阅了两次,所以订阅者 A 和订阅者 B 都会接收到新的value

3、ReplaySubject
会在订阅时接收一定数量的历史值(缓存)。
可以指定缓存的大小,当新的值推送到ReplaySubject时,最早的值会从缓存中移除。
适用于需要让订阅者获取历史值的场景。

RXJS中Subject, BehaviorSubject, ReplaySubject, AsyncSubject的区别?,前端,angular.js,typescript
这里发生了一些事情:

  • 我们创建了一个ReplaySubject的实例replay$,并指定我们只想存储最后两个值
  • 我们创建了一个订阅者 A
  • 调用三次replay$的next方法,把值发布给订阅者。这时订阅者 A 将会打印三次
  • 现在就来体验ReplaySubject的魔力。我们使用replay$创建了一个新的订阅者 B,由于我们告诉ReplaySubject,存储两个值,因此它将直接向订阅者 B 发出这些最后的值,订阅者 B 将打印出这些值。
  • replay$发出另外一个值,这时候,订阅者 A 和订阅者 B 都接收到值的改变,打印出另外一个值

你还可以指定值在ReplaySubject存储的时间,我们来看一个例子:
RXJS中Subject, BehaviorSubject, ReplaySubject, AsyncSubject的区别?,前端,angular.js,typescript
上面代码中发生了那些事情呢:

  • 我们创建了ReplaySubject,并指定它只存储最后两个值,但是不超过 100ms
  • 创建一个订阅者 A
  • 我们开始每 200ms 发出一个新的值。订阅者 A 会接收到发出的所有值
  • 我们创建一个订阅者 B,由于是在 1000ms 后进行订阅。这意味着在开始订阅之前,replay 已经发出了 5 个值。在创建ReplaySubject时,我们指定最多存储 2 个值,并且不能超过 100ms。这意味着在 1000ms 后,订阅者 B 开始订阅时,由于replay 是 200ms 发出一个值,因此订阅者 B 只会接收到 1 个值。

4、AsyncSubject:
只有在Subject完成时,订阅者才会收到最后一个值。
可以看作是在Observable完成时发射最后一个值的特殊Subject。
适用于只关心Observable完成时的结果的场景。

const asyncSubject = new AsyncSubject();
asyncSubject.subscribe(value => console.log(value));
asyncSubject.next(1);
asyncSubject.next(2);
asyncSubject.complete(); // 输出: 2

总的来说,这些Subject的选择取决于使用场景。BehaviorSubject适用于需要初始值的场景,ReplaySubject适用于需要缓存历史值的场景,AsyncSubject适用于只关心Observable完成时的结果的场景,而普通的Subject则是一个简单的广播机制。文章来源地址https://www.toymoban.com/news/detail-801896.html

到了这里,关于RXJS中Subject, BehaviorSubject, ReplaySubject, AsyncSubject的区别?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • RxJS中高阶操作符的全面讲解:switchMap,mergeMap,concatMap,exhaustMap

    原文链接:https://blog.angular-university.io/rxjs-higher-order-mapping/ 有一些在日常开发中常用的RxJS的操作符是高阶操作符:switchMap,mergeMap,concatMap,以及exhaustMap。 举个例子,程序中大多数的网络请求都是通过以上某个操作符来完成的,所以为了能够写出几乎所有反应式编程,必须熟

    2024年01月20日
    浏览(42)
  • 【angular教程240111】08异步数据流编程与angular :promise,Rxjs6.x

    【angular教程240111】08异步数据流编程与angular :promise,Rxjs6.x 三级目录 异步与 Rxjs6.x异步数据流编程-Angular Rxjs快速入门 一、 Rxjs介绍 二、 Promise和RxJS 处理异步对比 三、 Rxjs unsubscribe取消订阅 四、 Rxjs 订阅后多次执行 五、 Angualr6.x之前使用Rxjs的工具函数map filter 六、 Angualr6

    2024年02月02日
    浏览(44)
  • git commit 导致报错subject may not be empty [subject-empty] type may not be empty [type-empty]

    subject may not be empty [subject-empty] type may not be empty [type-empty] ✖ 主题不能为空[主题为空] ✖ 类型不能为空[类型为空] 查看列表        ls  帮助信息        pnpm -h 设置镜像        pnpm config set registry https://registry.npmmirror.com/ 在终端输入git commit -am \\\"**\\\",提交代码时 会触发

    2024年04月14日
    浏览(38)
  • 【git commit报错】报错信息:type may not be empty [type-empty] subject may not be empty [subject-empty]

    使用【git commit报错】 报错信息 :type may not be empty [type-empty] subject may not be empty [subject-empty] 报错原因 :git commit -m ‘feat:完成能力包审核开发’ 中 :后没加空格 解决报错 : :后 加空格即可

    2024年02月11日
    浏览(49)
  • git commit 规范不对导致报错subject may not be empty [subject-empty]type may not be empty [type-empty]

    使用commitlint之后报错 报错信息 找了很久原因,才发现TMD这里要有空格才能算正确的提交,emo 真是个奇葩的报错

    2024年02月12日
    浏览(47)
  • java.security.cert.CertificateException: No subject alternative names presen

    服务需要调用第三方,只能生产调用 上了生产测试相关逻辑,调用第三方接口报错,错误信息: ava.security.cert.CertificateException: No subject alternative names presen 使用的是HttpURLConnection 增加如下代码

    2024年02月08日
    浏览(40)
  • 前端和后端的区别

    有的人认为,前端很好学,后端不好学。 也有的人认为,前端不好学,后端好学,归根到底还得看个人兴趣。 前端和后端做简单的叙述 后端:入门难,深入更难,枯燥乏味,没有太大成就感,看一堆业务逻辑代码。 前端:入门简单,先易后难,能看到自己做出来的展示界面

    2024年02月10日
    浏览(30)
  • subject may not be empty | type may not be empty

    ✖ subject may not be empty [subject-empty] ✖ type may not be empty [type-empty] ✖ found 2 problems, 0 warnings ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint 原因是使用了规范commit信息的工具,你的提交信息不符合规范,所以被拒绝了 commit规范工具 commitlint husky 解决方式一:修

    2024年02月16日
    浏览(71)
  • 前端-Sass和Less区别

    Less和Sass都是CSS预处理器,它们提供了更强大、更灵活的方式来编写CSS样式。以下是Less和Sass之间的一些区别 : 语法:Less使用类似于CSS的语法,而Sass使用类似于Ruby的语法。Less使用大括号 {} 和分号 ; 来表示代码块和语句,而Sass使用缩进和冒号 : 来表示。 文件扩展名:Less文

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包