大家好，我是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(...);
}
6. 参考文献
Rx--隐藏在Angular 中的利剑
RxJS 核心概念Observer Subscription
30天精通Rxjs
介绍RxJS在Angular中的应用
7. 更多讨论
Observable 和 Promise有什么区别？
Observable 和 Promise 主要区别
8. 相关链接
<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=l05140bkpse&tiny=0&auto=0" allowfullscreen></iframe>
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请码：99483716，或者你可以直接点击此链接：IT修真院
网友评论