如何理解Rxjs

作者: Keriy | 来源:发表于2017-06-15 09:23 被阅读1716次

如何理解Rxjs
RxJS Observable
RxJS Observable - 一个奇特的函数
RxJs学习笔记6--不断产生数据的发布者
RxJS 用法(操作符)总结
rxjs
轻松理解RxJS
angular-rxjs
【武汉-第149期】如何理解RxJS?
01RxJS-响应式编程类库

大家好，我是IT修真院成都分院第5期的学员，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网js任务10，深度思考中的知识点——如何RxJs？

1. 背景介绍

什么是RxJs：
RxJS是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释RxJS其目标就是异步编程，Angular引入RxJS为了就是让异步可控、更简单。
响应式编程：在计算领域，响应式编程一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。

2. 知识剖析

Rxjs中的两个重要概念：Observer（观察者）和Subscription

什么是Observer？
Observer（观察者）是Observable（可观察对象）推送数据的消费者。在RxJS中，Observer是一个由回调函数组成的对象，键名分别为next、error和complete，以此接受Observable推送的不同类型的通知，下面的代码段是Observer的一个示例：

var observer = {
      next: x => console.log('Observer got a next value: ' + x),   
      error: err => console.error('Observer got an error: ' + err),
      complete: () => console.log('Observer got a complete notification'),
    };
    // next / error / compelete 可缺

    调用Observer逻辑，只需在subscribe（订阅）Observable后将Observer传入

    observable.subscribe(observer);

什么是Subscription
什么是Subscription？Subscription是一个代表可以终止资源的对象，表示一个Observable的执行过程。Subscription有一个重要的方法：unsubscribe。这个方法不需要传入参数，调用后便会终止相应的资源。

      var observable = Rx.Observable.interval(1000);
      var subscription = observable.subscribe(x => console.log(x));

      subscription.unsubscribe();

3. 常见问题

Angular 4 中如何使用Rxjs进行http请求？

// http get method   service

    public getAricle(url: string, searchText: URLSearchParams) {

        private getService: any = new Observable();

        this.getService = this.http.put(url, body options)
            .map(...)
            .catch(...);
    }

    // component
    this.servcieName.subscribe(data => {});

4. 编码实战

一个小demo

    var a, b = 1, c =2;
    a = b + c;
    console.log('b=' + b);
    console.log('c=' + c);
    console.log('a=' + a);
    b = 3;
    c = 2;

    console.log('a=' + a);

这段中，我们如果想让a输出为5,就是当b和c二次赋值后a的值是不会自动更新为5的。
但是使用Rxjs方法就可以实现。

    var b$ = Rx.Observable.from([1, 3]);
    var c$ = Rx.Observable.from([2, 2]);

    var a$ = Rx.Observable.zip(b$, c$, (b, c) => {
        console.log('b=' + b);
        console.log('c=' + c);

        return b + c;

    });

a$.subscribe(a => console.log('a=' + a));

2.另一个小demo

<html>
<head>
  <!---引入Rxjs--->
  <script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>
</head>
<body>
  Weight: <input type="number" id="weight"> kg
  <br/>
  Height: <input type="number" id="height"> cm
  <br/>
  Your BMI is <div id="bmi"></div>
</body>

以上是两个输入框。

let weight = document.getElementById('weight');
let height = document.getElementById('height');
let bmi = document.getElementById('bmi');

let weight$ = Rx.Observable
                .fromEvent(weight, 'input')
                .pluck('target', 'value');

let height$ = Rx.Observable
                .fromEvent(height, 'input')
                .pluck('target', 'value');

let bmi$ = Rx.Observable
              .combineLatest(weight$, height$, (w, h) => w/(h*h/100/100));

bmi$.subscribe(b => bmi.innerHTML=b);

combineLatest 操作符其实是在组合2个源数据流中选择最新的2个数据进行配对，如果其中一个源之前没有任何数据产生，那么结果流也不会产生数据。
所以，当我们更新其中一个输入框的值的时候，bmi值也会随着变化。想一想，这个功能如果用js方法实现还是比较烦的。

5. 扩展思考

Observable 如何转 Promise？

public getAricle(url: string, searchText: URLSearchParams) {

  private getService: any = new Observable();

  this.getService = this.http.put(url, body options)
      .toPromise()   // 看到没，这样
      .map(...)
      .catch(...);
}