什么是RxJS？

RxJS是ReactiveX编程理念的JavaScript版本。ReactiveX来自微软，它是一种针对异步数据流的编程。简单来说，它将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能.

RxJS对项目代码的影响？

RxJS中的流以Observable对象呈现，获取数据需要订阅Observable，形式如下：

  1. const ob = http$.getSomeList(); //getSomeList()返回某个由`Observable`包装后的http请求
  2. ob.subscribe((data) => console.log(data));
  3. //在变量末尾加$表示Observable类型的对象。

以上与Promise类似：

  1. const promise = http.getSomeList(); // 返回由`Promise`包装的http请求
  2. promise.then((data) => console.log(data));

实际上Observable可以认为是加强版的Promise，它们之间是可以通过RxJS的API互相转换的：

  1. const ob = Observable.fromPromise(somePromise); // Promise转为Observable
  2. const promise = someObservable.toPromise(); // Observable转为Promise

因此可以在Promise方案的项目中安全使用RxJS，并能够随时升级到完整的RxJS方案。

RxJS会增加多少体积？

RxJS(v5)整个库压缩后约为140KB，由于其模块化可扩展的设计，因此仅需导入所用到的类与操作符即可。导入RxJS常用类与操作符后，打包后的体积约增加30-60KB，具体取决于导入的数量。
不要用 import { Observable } from 'rxjs'这种方式导入，这会导入整个rxjs库，按需导入的方式如下：

  1. import { Observable } from 'rxjs/Observable' //导入类
  2. import 'rxjs/add/operator/map' // 导入实例操作符
  3. import 'rxjs/add/observable/forkJoin' // 导入类操作符

RxJS入门

核心概念

  • Observable
  • Observer
  • Operator

Observable被称为可观察序列，简单来说数据就在Observable中流动，你可以使用各种operator对流进行处理，例如：

  1. const ob = Observable.interval(1000);
  2. ob.take(3).map(n => n * 2).filter(n => n > 2);

第一步代码我们通过类方法interval创建了一个Observable序列，ob作为源会每隔1000ms发射一个递增的数据，即0 -> 1 -> 2。第二步我们使用操作符对流进行处理，take(3)表示只取源发射的前3个数据，取完第三个后关闭源的发射；map表示将流中的数据进行映射处理，这里我们将数据翻倍；filter表示过滤掉出符合条件的数据，根据上一步map的结果，只有第二和第三个数据会留下来。
上面我们已经使用同步编程创建好了一个流的处理过程，但此时ob作为源并不会立刻发射数据，如果我们在map中打印n是不会得到任何输出的，因为ob作为Observable序列必须被“订阅”才能够触发上述过程，也就是subscribe（发布/订阅模式）。

  1. const ob = Observable.interval(1000);
  2. ob.take(3).map(n => n * 2).filter(n => n > 0).subscribe(n => console.log(n));

结果：

  1. 2 //第2秒
  2. 4 //第3秒

上面代码中我们给subscribe传入了一个函数，这其实是一种简写，subscribe完整的函数签名如下：

  1. ob.subscribe({
  2.     next: d => console.log(d),
  3.     error: err => console.error(err),
  4.     complete: () => console.log('end of the stream')
  5. })

直接给subscribe传入一个函数会被当做是next函数。这个完整的包含3个函数的对象被称为observer（观察者），表示的是对序列结果的处理方式。next表示数据正常流动，没有出现异常；error表示流中出错，可能是运行出错，http报错等等；complete表示流结束，不再发射新的数据。在一个流的生命周期中，error和complete只会触发其中一个，可以有多个next（表示多次发射数据），直到complete或者error。
observer.next可以认为是Promise中then的第一个参数，observer.error对应第二个参数或者Promise的catch。
RxJS同样提供了catch操作符，err流入catch后，catch必须返回一个新的Observable。被catch后的错误流将不会进入observer的error函数，除非其返回的新observable出错。

  1. Observable.of(1).map(n => n.undefinedMethod()).catch(err => {
  2.     // 此处处理catch之前发生的错误
  3.     return Observable.of(0); // 返回一个新的序列，该序列成为新的流。
  4. });

创建可观察序列

创建一个序列有很多种方式，我们仅列举常用的几种：

Observable.of(...args)

Observable.of()可以将普通JavaScript数据转为可观察序列，点我测试。

Observable.fromPromise(promise)

将Promise转化为Observable，点我测试。

Observable.fromEvent(elment, eventName)

从DOM事件创建序列，例如Observable.fromEvent($input, 'click')，点我测试。

Observable.ajax(url | AjaxRequest)

发送http请求，AjaxRequest参考这里

Observable.create(subscribe)

这个属于万能的创建方法，一般用于只提供了回调函数的某些功能或者库，在你用这个方法之前先想想能不能用RxJS上的类方法来创建你所需要的序列，点我测试。