[成都|荣耀师兄]JS-包鹏亮|2017年06月14日的日报-技能树.IT修真院

发表于： 2017-06-14 22:49:08

4 1362

2017-06-14 Day085 x

今天完成的事情

异步请求啊，真的是异步的啊，今天解决的好几个bug都和这个有关，所以昨天写的bug今天都干掉了。

明天计划的事情

明天，明天就把这个富文本搞进去试试。

遇到的问题

上下线弹窗第一次需要点两次的问题就是因为数据没有返回，执行了putFaild方法。

收获

感觉我要去深入看一ajax。

如何理解Rxjs

大家好，我是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));

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(...);
}

另一个小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);