美文网首页
初识Rxjs的基础概念

初识Rxjs的基础概念

作者: 励志摆脱懒癌的少女酱 | 来源:发表于2019-07-06 18:55 被阅读0次

1.Observable:可观察对象—一个值或事件的流集合;
(1) 创建:Rx.Observable.create()/of()/from()等;
(2)订阅:subscrible()—每次调用都会有一个新的观察者,数据不共享;相当于调用创建Observables的参数函数,并提供接收数据的回调函数;
(3)执行:可观察者对象实例.next()/error()/complete()—相当于return;可以发送多个next通知,但若发送的是error/complete通知,则之后不会再发送任何通知了;
(4)清理:unsubscribe()


创建

(5)hot Observable vs cold Observable

  • hot Observable:内容创建与订阅者无关,实现多播,即无论多少个oberser来subscribe,推给observer的都是一样的数据源,若无订阅者,数据依然会产生,只是不传入数据通道;

    • 创建操作符:fromPromise、fromEvent、fromEventPattern;
  • cold Observable:每次被subscribe都产生一个全新的数据流,实现单播,若无订阅者,连数据都不会产生;
    2.Observer:观察者—三个回掉函数的集合对象

  • next():接收Observable发出的值;

  • error():接收错误;

  • complete():当没有新的数据发出时,触发操作;
    (1)先声明observer对象,再传入subscribe()做参数;


    声明观察者对象
    传入subscribe()

    (2)在subscribe()内部写回调函数,它会创建一个观察者对象;


    封装为observer

3.Subscription:订阅—Observable的执行,当Observable变化时,调用observer提供的方法通知他;
(1)订阅Observable类似于函数调用;
(2)unsubscribe()清理Subscription占用的资源;

4.Subject:主体—同一个Observable可以被多个observer订阅,subject可以向多个observer多路推送数值;
(1)每个Subject即是Observable也是Observer;

  • Subject不能重复使用,一旦Subject对象调用了complete/error函数,则它作为Observable的生命周期也就结束了;


    observerA:1, observerB:1, observerA:2, observerB:2
    observerA:1, observerB:1, observerA: 2, observerB:2, observerA:3, observerB:3

(2)BehaviorSubject:保存发送给消费者的最新值(初始值是0),并且当有新的观察者订阅时,会立即接收到该最新值;

observerA:0, observerA:1, observerA:2, observerB:2, observerA:3, observerB:3
  • publishBehavior():返回一个BehaviorSubject,当订阅时可立即获得上游吐出的最新值;

(3)ReplaySubject:记录Observable执行中的多个值并将其回放给订阅者

  • 创建时指定回放值的个数;


    为新的订阅者缓存三个值—observerA:1, observerA:2, observerA:3, observerA:4, observerB:2, observerB:3, observerB:4, observerA:5, observerB:5
  • 指定window time来确定记录多久以前的值;


    最大缓存数量是100,window time是500ms
  • publishReply(n):返回一个ReplaySubject,当订阅时缓存上游数据流中的n个数据;

(4)AsyncSubject:等待Observable发出complete通知后,才发送最后一个单个值

observerA:5, observerB:5
  • publishLast():返回一个AsyncSubject,订阅时只获取上游数据的最后一个值;

(5)refCount():当observable有订阅后才会自动打开广播功能,当没有订阅后,会自动关闭;
(6)publish()

5.Operators:操作符—接收传入的Observable,返回新的Observable;


常见的操作符
操作符分类

6.Scheduler:调度器— 改变Observable对象吐数据的节奏;
(1)实例

  • undefined/null:即不指定scheduler,代表同步执行的scheduler;
  • asap:利用事件循环实现异步,使用的是micro task
  • async:利用事件循环实现异步,使用的是macro task
  • queue:同步执行;
  • animationFrame:用于动画场景的scheduler;

[总结]Observable实例对象只是声明不执行,只有订阅subscribe是才执行其参数函数,若内部传出出来会调用subscribe的回调函数;

相关文章

  • 初识Rxjs的基础概念

    1.Observable:可观察对象—一个值或事件的流集合;(1) 创建:Rx.Observable.create...

  • rxjs 基础概念

    Rxjs 是什么? RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。它提供了...

  • rxjs

    rxjs使用观察者模式、迭代器模式以及函数式编程实现一种理想的、管理序列事件的方式rxjs的基础概念 Observ...

  • 浅析Angular之RxJS

    本文结构: 什么是RxJS RxJS有什么特点 RxJS核心概念 什么是RxJS 在javaScript中,我们可...

  • RxJS Observable

    前言 RxJS 的 Observable 有点难理解,其实 RxJS 相关的概念都有点难理解。毕竟 RxJS 引入...

  • RxJS Observable - 一个奇特的函数

    前言 RxJS 的 Observable 有点难理解,其实 RxJS 相关的概念都有点难理解。毕竟 RxJS 引入...

  • 初识rxjs

    最近因为一个偶然的机会接触到了rxjs, 但是发现网上关于rxjs的教程偏少,并且就我而言看了许多篇文章也只能算是...

  • Rxjs

    响应式编程简介 Rxjs概念 Rxjs全称Reactive Extension for JavaScript,Ja...

  • Android 基础概念初识

    一、Gradle初识 Gradle 是 Android Studio 的内置版本选项。因此 Android 中具有...

  • 初识Fish Redux在Flutter中使用

    初识Fish Redux在Flutter中使用 本教程需要你在官方教程的基础上有概念性的了解,若你对基础概念不了解...

网友评论

      本文标题:初识Rxjs的基础概念

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