Rxjs简介

发表于 | 分类于 | | 阅读次数:

谈谈Rxjs库的基本原理和使用。

Rxjs库

Rxjs是时下比较受欢迎的RP范式的一个库，RP是响应式编程的意思，就是说对于c=a+b，a，b的变化均会导致c的变化。

1
2
3
4
let a = 1;
let b = 2;
let c = a+b;//3
a = 10;//c还是3，就不是响应式的

换成响应式的

1
2
3
4
5
6
7
8
let a = new Rx.Subject();
let b = new Rx.Subject();
let c = a
    .combineLatest(b, (total, now) => total + now) // a+b
    .subscribe(console.log);
a.next(1);
b.next(2);// 输出3
a.next(10);// 输出12

这里需要引入Rxjs的库，那么什么是Rxjs呢？应用官网的话“RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。”emmmmmm…说和没说一样。。。那我用自己的理解说一下，Rxjs大概就是把一切数据都看做是流，然后所有的操作都是对流的变幻，每当流里面出来一个新的值都会经过一系列预设的操作得到相应的结果。应用响应式的思想可以让结果同步变化，应用函数式的思想可以让流处理变得十分方便。

1
2
3
4
5
6
7
8
9
10
let a = new Rx.Subject();
let b = new Rx.Subject();
let doublea = a.map(d => d * 2); //2*a
let squareb = b.map(d => d * d); //b^2
let c = doublea
    .combineLatest(squareb, (total, now) => total + now) // 2*a+b^2
    .subscribe(console.log)
a.next(1);
b.next(2); //输出6
a.next(10); //输出24

这里的map，combineLatest都是流处理函数，最后的subscribe是流订阅函数，只有被订阅的流才可以真正触发（订阅就类似于函数调用，没有订阅的流就只是一些步骤的定义，只有订阅了流才工作）

上面说了一堆就是Rxjs入个门，Rxjs最大的魅力就是丰富多样的流处理函数，对于那么多的处理函数官网的查询机制也很完善，可以去体验下。

对于Angular中，是默认使用Rxjs库的，比如常用的HTTP请求。我们先对aaa发起一个get请求，然后json化后取出bbb字段，最后log出来

1
2
3
4
this.http.get('aaa')
    .map(data=>data.json())
    .map(data=>data.bbb)
    .subscribe(console.log);

进一步学习

30 天精通 RxJS
使用响应式编程来实现简易版的无限滚动加载
Rxjs官网