RxJS学习笔记(1)

RxJS

概述

RxJS全名Reactive Extensions for JavaScript,起源于Reactive Extensions项目,该项目主要实现各种语言的响应式编程(Reactive programming)库,被认为是观察者模式与函数式编程相结合的最佳实践。官方是这样吹嘘的:

Reactive Revolution:ReactiveX is more than an API, it's an idea and a breakthrough in programming. It has inspired several other APIs, frameworks, and even programming languages.

而RxJS是其项目中一个基于JavaScript的库,主要用于解决js中的异步编程问题。说到这里,我们又不得不提一下响应式编程的思想,其主要思路如下:

响应式的思路:是把随时间不断变化的数据、状态、事件等等转成可被观察的序列(Observable Sequence),然后订阅序列中那些Observable对象的变化,一旦变化,就会执行事先安排好的各种转换和操作。

RxJS是比ES7中async/await更高层面的流程逻辑抽象,把异步带来的时间因素给剥离到了程序流程外部,描述了一个动态的数据结构(数据流,stream)。因为我们平时写代码时都是关注程序执行的瞬间,即静止状态,缺少了时间这个维度。所以RxJS就给我们提供了很多与时间无关的通用高层抽象,即数据流操作算符api。通过这些api,我们可以自由地定义数据流的过滤、转换和组合等操作的组合关系,而无需关心具体操作的实现。

好处

  1. 事件产生逻辑与处理逻辑分离

  2. 事件处理逻辑被数据结构化,能自由组合,方便修改扩展(函数式编程的思想)

Why RxJS

RxJS是最近几年兴起的,关注度还是挺高的(github上有18000+star)。但是其理念还是比较抽象的,所以学习成本还是有点大的。

那么为什么还是要学呢?

因为最近项目框架转型,由angularjs转向angular2+,这次Google和微软联手,angular和typescript打包,也就顺带引入了小弟RxJS(捂脸)。

不过,引入RxJS也存在着一个问题,就像知乎上说的:

Rx 的一个问题就是它其实是一个 paradigm,侵入性很强。你如果要用 Rx 写东西,最好就整个系统都是以 Rx 为核心来设计。

如何过渡到RxJS

这里主要以angularjs过渡到angular中使用RxJS为例。

普通的Promise

对于一个普通的promise,我们一般处理如下:

promise().then(
  ()=>{
    // success
  },
  ()=>{
    // error
  });

而在RxJS中,我们一般得到的是一个Observable(可观察对象),类似的像上面一样的处理被称为订阅,其实现如下:

observable().subscribe(
  ()=>{
    // next
  },
  ()=>{
    // error
  },
  ()=>{
    // complete
  });

这里的next就相当于success,但又不同。因为Observable(可观察对象)是基于推送(Push)运行时执行(lazy)的多值集合,所以对一个Observable的订阅可能产生多个next。不过对于一般的http请求,只会产生一个next。不过,两者的error基本相同。但是,这里需要注意的是,complete只会在next执行完成后调用,error时不调用。大致逻辑如下:

const observable = Observable.create(function (observer) {
      try {
        observer.next(1);
        observer.next(2);
        observer.next(3);
        observer.complete();
      } catch (err) {
        observer.throw(new Error(err));
      }
    });

并发promise

在应用场景中,我们可能需要同时发送多个请求,并且成功后才进行处理。

Promise中提供了all()方法,接收参数为一个可迭代对象,使用如下:

const promise = Promise.all([promiseA, promiseB, promiseC]);
promise().then(
  ()=>{
    // success
  },
  ()=>{
    // error
  });

类似的,angularjs中提供了$q.all()。

而在RxJS中,也提供了相应的操作算符api,即Observable.forkJoin(),用法与上面类似:

const observable = Observable.forkJoin(observableA, observableB, observableC);
observable().subscribe(
  ()=>{
    // next
  },
  ()=>{
    // error
  });

需要注意的是,RxJS5以后,这种算符的使用都需要加上相应的引用,如这里需要加上import 'rxjs/add/observable/forkJoin'

串行promise

考虑另一种场景,请求B调用依赖请求A成功后返回的数据。

在Promise中我们通常如下处理:

promiseA.then(
  data=>{
    // promiseA success
    return promiseB(data);
  },
  ()=>{
    // error
  }).then(
    ()=>{
      // promiseB success
    },
    ()=>{
      // error
    });

类似的,RxJS中也提供了相应的api,即Observable.mergeMap(),用法如下:

observableA.mergeMap(
  data=>{
    // observableA next
    return observableB(data);
  }).subscribe(
    data=>{
      // observableB next
    },
    ()=>{
      // error
    });

改造promise

为了方便向使用RxJS库的过渡,RxJS中还提供了toPromise()、fromPromise()方法,方便进行Observable对象与Promise对象之间的相互转换。

To be continue

当然RxJS的功能还远不止这些,持续更新中...如果有什么问题,欢迎小伙伴们一起讨论,大家一起共同进步=。=

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

推荐阅读更多精彩内容