写点什么

RxJS Observable 为什么要长成这个样子?!

作者:掘金安东尼
  • 2022 年 8 月 20 日
    广东
  • 本文字数:2082 字

    阅读完需:约 7 分钟

RxJS Observable 为什么要长成这个样子?!

它大概长什么样子

我们都知道 RxJS Observable 最基础的使用方法:是建立 Observable,即调用 .create API


使用方法如下🌰:


var observable = Rx.Observable  .create(function(observer) {    observer.next('Hi');    observer.next('Jimmy');  })
observable.subscribe( value => {console.log(value)})
// Hi// Jimmy
复制代码



创建一个 observable 实例后,当它调用 .subscribe,会将 .next(params) 的信息传到 value 并执行这个 function


next 的过程是同步的,但,也可以是异步的,比如🌰:


var observable = Rx.Observable  .create(function(observer) {    observer.next('Hi');    observer.next('Jimmy');
setTimeout(() => { observer.next('async'); }, 30) })
console.log('start');
observable.subscribe( value => {console.log(value)});
console.log('end');
// start// Hi// Jimmy// end// async
复制代码


其中,observer,除了 next 方法,


还有:


  • complete 方法

  • error 方法:


用法如下🌰:


var observable = Rx.Observable  .create(function(observer) {                observer.next('Hi');                observer.next('Jimmy');                observer.complete();                observer.next('long time no see');  })
observable.subscribe( value => { console.log(value); }, error => { console.log('Error: ', error); }, complete => { console.log('complete') },)
// Hi// Jimmy// complete
复制代码


complete 执行后,next 就会自动失效,不会再继续打印出 "long time no see";


而 error 用于捕获 try catch 中 throw 的 'msg';


                ...                try {                    observer.next('Hi');                    observer.next('Jimmy');                    throw 'some exception';                } catch(e) {                    observer.error(e)                }                ...
复制代码

为什么这么写

那它为什么要长成这个样子呢?Why?



我就写这样,它不香?


function fn1(){    console.log('Hi')    console.log('Jimmy')    return false}
fn1()
复制代码


为什么要改写为类似这样:


function f1(cb){    cb('Hi')    cb('Jimmy')    return false}
fn1(value => console.log(value))
复制代码


本瓜最终理解为,其最具重要意义的一点是:为了将【数据】和【操作数据的行为】分开!!


实际上,分离【常量数据】和【操作方法】(也可以叫作计算方法/计算函数)是函数式编程的重要思想 —— 所有所需所求,都是通过计算得来的,而不改变变量的值;


(将一个函数作为参数传入另外一个函数,也就是 FP 中常提的高阶函数;)


过去,如果不将数据和操作分开,它是这样的:


function f1(){    console.log('Hi')    console.log('Jimmy')    return false}
function f2(){ alert('Hi') alert('Jimmy') return false}
fn1()fn2()
复制代码


在函数体内,是命令式的代码风格,将 A 数据这样操作,再将 B 数据这样操作;


而现在,将数据和操作分开,它是这样的:


function stream(cb){     cb('Hi')    cb('Jimmy')    return false}
stream(value => console.log(value))stream(value => alert(value))
复制代码


stream 函数体内,声明了 A 数据、B 数据...... 是一个数据流;


具体怎么再操作这些数据,就再看【操作方法】是什么;


这样做还有另外一个很大的 好处,就是:


对于多个数据流和多个操作,它的代码结构会更清晰,耦合度更低,拓展性更高;


它会是这样的:


class Stream {  constructor(behavior) {    this.behavior = behavior  }  doHandle(cb) {    this.behavior(cb)  }}
const handleStream1 = new Stream(cb => { cb('Hi') cb('Jimmy')})
const handleStream2 = new Stream(cb => { cb('Bye') cb('Lily')})
/******** 以上是数据流声明 ********//******** 以下是操作 ********/
// 对数据流 1,做第一种操作handleStream1.doHandle( value => console.log(value))
// 对数据流 1,做第二种操作handleStream1.doHandle( value => alert(value))
// 对数据流 2,做第一种操作handleStream2.doHandle( value => console.log(value))
// 对数据流 2,做第二种操作handleStream2.doHandle( value => alert(value))
复制代码


特别说明:以上的操作( consolealert) 只是一种最简单的替代操作的示意,实际代码中,会复杂的多(对数据进行复杂计算等等)。


我敲,这 Stream 不就是 Observable 吗!cb 不就是 observerdoHandle 不就是 subscribe!!



<hr>


小结:


毫无疑问,Observable 还有更多神奇的妙用,本篇理解不过管中窥豹,但想要强调的重点即是:将数据声明和数据操作分离,是函数式编程中提高代码可读性的重要特性;至于数据形成的数据管道,以及常用管道操作,后面会继续介绍(关注不迷路)~~


不知道各位对 Observable 有怎样的理解,欢迎评论留言讨论。


我是掘金安东尼,输出暴露输入,技术洞见生活,下次见~~

发布于: 刚刚阅读数: 3
用户头像

安东尼陪你度过漫长编程岁月~ 2022.07.14 加入

社会我瓜哥,人狠话不多😎 微信 anthony1453,加我交个朋友😎 正联合【机械工业出版社】出版《程序员成长手册》,敬请期待😎 真正的大师,永远怀着一颗学徒的心(易)😎

评论

发布
暂无评论
RxJS Observable 为什么要长成这个样子?!_前端_掘金安东尼_InfoQ写作社区