继续解惑,异步处理 —— RxJS Observable

简介: Observable 可观察对象是开辟一个连续的通信通道给观察者 Observer,彼此之前形成一种关系,而这种关系需要由 Subscription 来确立,而在整个通道中允许对数据进行转换我们称为操作符 Operator。

image.png

接上一篇《Js 异步处理演进,Callback=>Promise=>Observer》,可能不少掘友对 Observer 还心存疑虑,本篇继续解惑~


Observable 称它为可观察对象,它并不是 Angular 的东西,而是 ES7 的一种用来管理异步数据的标准。


Observable 可观察对象是开辟一个连续的通信通道给观察者 Observer,彼此之前形成一种关系,而这种关系需要由 Subscription 来确立,而在整个通道中允许对数据进行转换我们称为操作符 Operator。


有一个形象的比喻:


你订了一个银行卡余额变化短信通知的服务,那么这个时候,每次只要你转账或者是购买商品在使用这张银行卡消费之后,银行的系统就会给你推送一条短信,通知你消费了多少多少钱;


这个场景下,银行卡余额就是 Observable,用户就是 Observer,用户在银行办理这个服务,就是 Subscription,银行卡余额发生转账或购买商品产生了变动,就是 Operator。


将上面的过程转化为代码:


import { Observable } from 'rxjs/Rx';
let sub = Observable
    .interval(1000)
    .map(second => second + '秒')
    .subscribe(res => {
        console.log(res);
    });


利用 Observable.interval 每隔 1 秒产生一个数据,然后交给 map 操作号将内容进行转换(银行卡余额发生变动),最后交给观察者打印结果(通知用户余额发生变化)。

如果你想取消这个服务,可以调用 sub.unsubscribe()


整个过程都在体现一个思想:数据流!这和函数式编程思路一致,数据流就像是工厂流水线,从原材料到成品,经过一层层的处理,所见即所做,非常清晰!(分离材料与加工机器,就是分离 Observable 和 Subscribe)


接下来,我们再具体看看 Observable 细节:


  • 创建
const Rx = require('rxjs/Rx')
const myObservable = Rx.Observable.create(observer => {
  observer.next('foo');
  setTimeout(() => observer.next('bar'), 1000);
});


我们可以调用 Observable.create 方法来创建一个 Observable,入参是 observer,在函数内部通过调用 observer.next() 便可生成有一系列值的一个 Observable


  • 内置方法
const observer = {
  next: function(value) {
    console.log(value);
  },
  error: function(error) {
    console.log(error)
  },
  complete: function() {
    console.log('complete')
  }
}


nexterrorcomplete,都是可选项;


打个比方:用户订牛奶厂商的牛奶,牛奶厂商是 Observable,用户是 Observer。用户打电话(subscribe)给牛奶商,牛奶商送牛奶(next),用户收到牛奶后喝牛奶;送奶过程可能发生意外,送奶失败(error);或者送奶顺利全部完成(complete);

  • Operator:RxJS 提供了大量的 API,熟悉他们需要时间和经验;


创建数据流

  • 单值:ofemptynever
  • 多值:from
  • 定时:intervaltimer
  • 事件:fromEvent
  • Promise:fromPromise
  • 自定义:create


转换

  • 改变数据形态:map, mapTo, pluck
  • 过滤一些值:filter, skip, first, last, take
  • 时间轴上的操作:delay, timeout, throttle, debounce, audit, bufferTime
  • 累加:reduce, scan
  • 异常处理:throw, catch, retry, finally
  • 条件执行:takeUntil, delayWhen, retryWhen, subscribeOn, ObserveOn
  • 转接:switch


组合

  • concat 保持原来的序列顺序连接两个数据流
  • merge 合并序列
  • race 预设条件为其中一个数据流完成
  • forkJoin 预设条件为所有数据流都完成
  • zip 取各来源数据流最后一个值合并为对象
  • combineLatest 取各来源数据流最后一个值合并为数组


Observable 的优势在于:

  • 降低了目标与观察者之间的耦合关系,两者之间是抽象耦合关系;
  • 符合 依赖倒置原则
  • 目标与观察者之间建立了一套触发机制;
  • 支持广播通信多播;


依赖倒置原则:依赖倒置原则(Dependence Inversion Principle)是程序要依赖于抽象接口,不要依赖于具体实现。简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合。

多播(即一个Observable,多个subscribe):

image.png

以上就是关于 RxJS Observable 进一步在概念上的解惑~~

觉得还不错,点个赞吧👍👍👍


更多推荐阅读:


相关文章
|
Android开发
Android 全屏适配刘海机型
Android 全屏适配刘海机型
362 0
|
开发工具 Android开发 iOS开发
2023年APP备案操作教程 阿里云APP备案试列 APP公钥sha1签名获取方法
核心要点:A,域名之前是哪里备案的,APP备案就到哪里去做,方便简单;B,APP备案核心预存信息为APP包名、MD5指纹(安卓)、sha1签名(IOS)、公钥;这3个信息请找APP开发人员获取;一门开发的可以自行到开发者后台【配置】-【证书与包名】获取对应安卓、苹果APP信息。
支付系统39----支付宝支付,定时查单,每隔30秒执行1次,查询超过5分钟,并且未支付的订单
支付系统39----支付宝支付,定时查单,每隔30秒执行1次,查询超过5分钟,并且未支付的订单
钉钉如何查看审批人签字图片?审批人审批单子加的签名
钉钉如何查看审批人签字图片?审批人审批单子加的签名
392 0
|
开发工具 git 缓存
Git忽略规则.gitignore不生效
在项目开发过程中个,一般都会添加 .gitignore 文件,规则很简单,但有时会发现,规则不生效。 原因是 .gitignore 只能忽略那些原来没有被track的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的。
61941 4
|
算法 数据挖掘 Python
Python中的拟合技术:揭示数据背后的模式
Python中的拟合技术:揭示数据背后的模式
245 0
Python中的拟合技术:揭示数据背后的模式
|
SQL 关系型数据库 MySQL
【超全整理】SQL日期与时间函数大汇总会:MySQL与SQL Server双轨对比教学,助你轻松搞定时间数据处理难题!
【8月更文挑战第31天】本文介绍了在不同SQL数据库系统(如MySQL、SQL Server、Oracle)中常用的日期与时间函数,包括DATE、NOW()、EXTRACT()、DATE_ADD()、TIMESTAMPDIFF()及日期格式化等,并提供了具体示例。通过对比这些函数在各系统中的使用方法,帮助开发者更高效地处理日期时间数据,满足多种应用场景需求。
1742 1
|
数据库连接 PHP UED
PHP中的异常处理:深入理解try-catch语句
【6月更文挑战第11天】在PHP编程中,异常处理是一项至关重要的技术。它允许开发者以结构化和可控的方式响应运行时错误。本文将深入探讨PHP中的try-catch语句,揭示其工作原理、使用方法以及如何通过异常处理提升代码的健壮性和可维护性。我们将通过实例演示如何在PHP中有效地使用try-catch语句来捕获和处理异常。
177 0
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
5478 1
|
运维 Linux 应用服务中间件
Centos7如何配置firewalld防火墙规则
Centos7如何配置firewalld防火墙规则
502 0