RxJS学习笔记1

前置:我目前的学习资料是30天精通RxJS,那个时候的RxJS是5.x版本,而目前最新版本是RxJS 6,所以资料会放一部分5.x的代码,我也会自己将他转录成RxJS6的版本,可以做一个对比。
学习前置:需要JavaScript的相关知识,了解Ajax,会用控制台,最好有ES6和node.js的基础。
在线代码平台:JS Bin


为什么学习RxJS

目前刚进公司,权限很多都没批下来,因为公司的前端框架用的是Angular,而Angular的脚手架工具自带RxJS的包,所以准备自学一下。
一接触感觉这个库真的很不错,首先他并不是依赖于Angular的一个库,无论你使用React,Angular甚至是原生JavaScript,都可以使用这个库,据说在新的ES版本中正打算将其直接引入原生的JavaScript中。这也就意味着学习RxJS不需要有Angular的前置技能需求,不需要你了解前端的MVVM框架,也不需要了解TypeScript,只需要有原生JavaScript的基础以及对异步有初步的了解,懂得JavaScript中部分异步(setInterval,setTimeout以及ajax等等)的内容便可以学习了。
其次使用RxJS能简化很多涉及到异步执行的操作,在处理异步方面有点类似Promise,可以很好的处理异步信息,不会陷入无限多的回调函数,使得异步调用的过程清晰而有条理;同时也支持同步信息的处理,也可以将同步数据转化成异步输出的信息。
同时RxJS提供了丰富的operator可以对Observable进行处理,这一部分很像LinQ,数据的处理也同LinQ一样非常直观,这是promise所不具备的功能。
而与async/await相比,无论对于学习来说还是对开发来说都相当利于理解,学习成本更低。


RxJS基础部分:安装与引用

  • 学习5.x的可以不需要安装node.js
    页面中引入RxJS<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>

  • 如果希望学习6.x的需要一些es6以及nodejs的基础
    1.在官网下载并安装node.js
    2.1.通过cmd输入如下命令安装angular脚手架npm install -g @angular/cli
    2.2.不希望学习Angular的可以直接安装RxJSnpm install -g rxjs
    3.在代码中import { 你需要使用的模块名 } from 'rxjs'
    需要引用哪些模块我将会在代码中给出。

5.x版本以及6.x版本理念是相同的,只不过代码版式略有不同。


RxJS基础部分:Observable

observable是RxJS的核心之一,直译是可观测的物体,在实例中一般是我们的所需要获取的数据源,以下是一段简单的创建observable对象的代码。

//5.x版本
var observable = Rx.Observable  // 创建一个observable对象.create(function(observer) {
        observer.next('Jerry'); // 同步部分
        observer.next('Anna');  
        setTimeout(() => {      // 异步部分
            observer.next('RxJS!');
            observer.complete();  //停止observable,此后部分不会被显示。
            observer.next("not work");
        }, 300)
    })
//6.x版本,可以发现这里没有Rx.
//你需要在这之前import {Observable} from 'rxjs'
  var observable = Observable.create(observer => {
    observer.next("Jerry");
    observer.next("Anna");
    setTimeout(() => {      
        observer.next('RxJS!');
        observer.complete();  
        observer.next("not work");
    }, 300)
  });

create()方法是直接创建一个observable对象的方法,该方法的参数是一个函数,其中规划了observable将来的走向。
我们一般不会再实例中直接这样定义一个人为的observable,不过这有助于我们理解observable内的三个命令(上面有两个)。
一个是next(),next顾名思义下一个数据,指的是observable中将会被观测到的下一个数据,这里的observer.next()中的参数则会作为observable的输出。
第二个是complete(),observable在没有complete前将会一直打开,complete则会关闭这个observable,之后再输出的next将不会有反应,就如同上述代码的not work,将是不会被输出的。

看到这里,有自己试着写代码的人肯定会问我,不止not work,我在浏览器里什么都没有看见,这个代码是不是写错了?

代码并没有错,但observable只是一个可以被观察的对象,世间有千千万万可以被观测的东西,只有你去注意,才能注意到事物发出的信息,这个注意的动作,叫做subscribe。


RxJS基础部分:Subscribe

试着在上述代码下加上如下代码(这里5.x和6.x的写法是一样的,以后没有特别提示RxJs的版本的代码将会是两者通用的),摁下F12,进入console,观察一下控制台的输出是否和注释相同。

console.log('start');
observable.subscribe(function(value) {  
// 订阅这个observable对象,并为其设置观察者方法。
    console.log(value);
});
console.log('end');
//start
//Jerry
//Anna
//end
//RxJS!

正如上一小节所说,RxJS具有同时处理同步和异步的能力,我们可以发现同步输出的Jerry与Anna插在了start与end之间,而异步输出的RxJS!则在end之后输出,complete之后的not work则没有出现。
大家可以试试把comlete放到setTimeout的外面一试,这样更能证明observable同时处理同步以及异步的能力。

subscribe不仅只有处理next的能力,和promise类似,subscribe有自己的对于不同状态的处理,请看如下代码:

observable.subscribe( {
    next: function(value) {      //next()走这里
           console.log(value);
    },
    error: function(error) {      // 出现异常走这里
           console.log('Error: ', error)
    },
    complete: function() {        //complete()走这里
           console.log('complete')
    }
})
//lambda表达式写法
observable.subscribe(
  v => { console.log(v); },
  e => { console.log('Error: ', e); },
  () => { console.log('complete') }
)

subscribe可以传入三个函数以来应对三个不同的情况
第一个函数参数用于处理next()
第二个函数参数用于处理内部处理过程中抛出的异常
第三个函数则用于处理complete信号,可以用上述代码替换最早的subscribe代码,看看情况有什么变化。

subscribe也有一个自己的返回值,是一个subscription对象,我们可以利用这个对象的unsubscribe方法去结束某些无法complete的observable(未来我们会见到不少)。

var _subscription = observable.subscribe(function({
  ......
}))
_subscription.unsubscribe();

本章小结

这一小节的内容相对简单,主要介绍了如何引用RxJS以及RxJS最基础也是最核心的两个部分。
下一章我们将会接触到另一个核心部分,operator,操作符。

附录

30天精通RxJS,我是在readilen的简书上阅读的转载,原作者应该是台湾的一位前端工程师Jerry Hong,有兴趣的可以去拜读一下原文,有很多概念性的东西我没有提到,我这篇主要工作是自己总结并分享我的学习记录,并将老版本更新为新版本代码。
其中大部分思考与看法源于个人,如果有错误的话希望各位不吝赐教,这两天我大概学习了十多章,这个周末我会尽快把这些整理出来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容