Rxjs 学习笔记 - 简化版

发布时间:2023年12月17日

RxJS 提供了一套完整的异步解決方案,让我们在面对各种异步行为(Event, AJAX, Animation 等)都可以使用相同的 API 做开发。

前置知识点

  • 同步(Synchronous)就是整个处理过程顺序执行,当各个过程都执行完毕,并返回结果。是一种线性执行的方式,执行的流程不能跨越。一般用于流程性比较强的程序,比如用户登录,需要对用户验证完成后才能登录系统。
  • 异步(Asynchronous)则是只是发送了调用的指令,调用者无需等待被调用的方法完全执行完毕;而是继续执行下面的流程。是一种并行处理的方式,不必等待一个程序执行完,可以执行其它的任务,比如页面数据加载过程,不需要等所有数据获取后再显示页面。
  • 观察者模式又叫发布订阅模式(Publish/Subscribe),它是一种一对多的关系,让多个观察者(Obesver)同时监听一个主题(Subject),这个主题也就是被观察者(Observable),被观察者的状态发生变化时就会通知所有的观察者,使得它们能够接收到更新的内容。观察者模式主题和观察者是分离的,不是主动触发而是被动监听。
  • 迭代器模式又叫游标(Sursor)模式,迭代器具有 next 方法,可以顺序访问一个聚合对象中的各个元素,而不需要暴露该对象的内部表现。迭代器模式可以把迭代的过程从从业务逻辑中分离出来,迭代器将使用者和目标对象隔离开来,即使不了解对象的内部构造,也可以通过迭代器提供的方法顺序访问其每个元素。
  • 响应式编程,即 Reactive Programming,它是一种基于事件模式的模型。简单来说,上一个任务执行结果的反馈就是一个事件,这个事件的到来会触发下一个任务的执行。
  • Stream / 流的本质是一个按时间顺序排列的进行中事件的序列集合。

一、RxJS 基本介绍

RxJS 全称 Reactive Extensions for JavaScript,翻译过来是 Javascript 的响应式扩展,起源于 Reactive Extensions,是一个基于可观测数据流 Stream 结合观察者模式和迭代器模式的一种异步编程的应用库

它提供了一个核心类 Observable,几个关键的类Observer、 Schedulers、 Subjects 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等),这些数组操作符可以把异步事件作为集合来处理。

简单来说 Rx(JS) = Observables (被观察者)+ Operator (操作符)+ Scheduler(调度器)。

二、RxJS 的核心概念:

  • Observable (被观察者):  表示一个概念,这个概念是一个可调用的未来值或事件的集合。可以类比为Promise对象,在其内部可以进行异步操作,并且在异步操作执行完毕后将结果传递到可观察对象的外部。
  • Observer (观察者):  一个回调函数的集合,它知道如何去监听由 Observable 提供的值。类比then方法中的回调函数,用于接收可观察对象传递出来的数据
  • Subscribe(订阅):  表示 Observable 的执行,主要用于取消 Observable 的执行。类比then方法,当可观察对象发出数据时,订阅者可以接收到数据。
  • Operators (操作符):  采用函数式编程风格的纯函数 (pure function),使用像map、filter、concat、flatMap等这样的操作符来处理集合。
  • Subject (主体):  相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
  • Schedulers (调度器):  用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如
    setTimeout 或 requestAnimationFrame或其他。

三、 理解 RxJS 中的 Observer  和 Observable

简单一行代码,就懂了它们的关系:observable.subscribe( observer )——observable是 数据的源头,是生产者,是待订阅者,通过subscribe方法可以被observer所订阅,而observer 是观察者,数据的使用者,数据的消费者。

将买房作为例子套用到观察者模式中:

  • 房价即为 Observable 对象;
  • 购房者即为 Observer 对象;
  • 而购房者观察房价即为 Subscribe(订阅)关系;

结合买房的例子,描述 Observable 和 Observer 的行为:

  • Observable ****可被观察,即房价被购房者关注,并且随时间变化发出 (emit) 不同值,表现为房价波动;
  • Observer 可以观察 Observable,即购房者关注房价,并在 Observable (房价)发出不同值(房价波动)时做出响应,即买房或观望;
  • Observable 和 Observer 之间通过订阅(Subscription)建立观察关系;
  • 当 Observable 没有 Observer 的时候,即使发出了值,也不会产生任何影响,即无人关注房价时,房价不管如何波动都不会有响应;

四、Observable (被观察者)

RxJS 的基础就是 Observable,只要弄懂 Observable 就算是学会一半的 RxJS ,剩下的就只是一些方法的练习和

文章来源:https://blog.csdn.net/qianqianyixiao1/article/details/134947371
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。