前言
RxJS在看文档后完全是一片懵,直到我在angular的应用中遇到很多需要实现的功能的时候...RxJS完美!
什么是Observable?
Observable只是一个普通函数,要想让他有所作为,就需要跟observer一起使用;前者是受后者是攻。而这个observer(后面我们会介绍)只是一个带有 next、error、complete 的简单对象而已。最后,还需要通过 subscribe 订阅来启动Observable;否则它是不会有任何反应;可以理解为陌*为了他们能在一起而提供的环境,而订阅也会返回一个可用于取消操作(在RxJS里叫 unsubscribe)。
当Observable设置观察者后,而连接并获取原始数据的这个过程叫生产者,可能是DOM中的 click 事件、input 事件、或者更加复杂的HTTP通信。
为了更好理解,先从一个简单的示例开始:
import { Component } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
@Component({
selector: 'app-home',
template: `<input type="text"> `
})
export class HomeComponent {
ngOnInit() {
const node = document.querySelector('input[type=text]');
// 第二个参数 input 是事件名,对于input元素有一个 oninput 事件用于接受用户输入
const input$ = Observable.fromEvent(node, 'input');
input$.subscribe({
next: (event: any) => console.log(`You just typed ${event.target.value}!`),
error: (err) => console.log(`Oops... ${err}`),
complete: () => console.log(`Complete!`)
});
}
}
复制代码
示例中 Observable.fromEvent() 会返回一个Observable,并且监听 input 事件,当事件被触发后会发送一个 Event 给对应的observer观察者。
什么是Observer?
observer非常简单,像上面示例中 subscribe 订阅就是接收一个 observer 方法。
一般在Angular我们 subscribe 会这么写:
input$.subscribe((event: any) => {
});
复制代码
从语法角度来讲和 subscribe({ next, error, complete })
是一样的。
当Observable产生一个新值时,会通知 observer 的 next()
,而当捕获失败可以调用 error()
。
当Observable被订阅后,除非调用observer的 complete()
或 unsubscribe()
取消订阅两情况以外;会一直将值传递给 observer。
Observable的生产的值允许经过一序列格式化或操作,最终得到一个有价值的数据给观察者,而这一切是由一序列链式operator来完成的,每一个operator都会产生一个新的Observable。而我们也称这一序列过程为:流。
什么是operator?
正如前面说到的,Observable可以链式写法,这意味着我们可以这样:
Observable.fromEvent(node, 'input')
.map((event: any) => event.target.value)
.filter(value => value.length >= 2)
.subscribe(value => { console.log(value); });
复制代码
下面是整个顺序步骤:
假设用户输入:a Observable对触发 oninput 事件作出反应,将值以参数的形式传递给observer的 next()。 map() 根据 event.target.value 的内容返回一个新的 Observable,并调用 next() 传递给下一个observer。 filter() 如果值长度 >=2 的话,则返回一个新的 Observable,并调用 next() 传递给下一个observer。 最后,将结果传递给 subscribe 订阅块。 你只要记住每一次 operator 都会返回一个新的 Observable,不管 operator 有多少个,最终只有最后一个 Observable 会被订阅。
不要忘记取消订阅。
为什么需要取消订阅
Observable 当有数据产生时才会推送给订阅者,所以它可能会无限次向订阅者推送数据。正因为如此,在Angular里面创建组件的时候务必要取消订阅操作,以避免内存泄漏,要知道在SPA世界里懂得擦屁股是一件必须的事。
unsubscribe
前面示例讲过,调用 subscribe() 后,会返回一个 Subscription 可用于取消操作 unsubscribe()。最合理的方式在 ngOnDestroy 调用它。
ngOnDestroy() {
this.inputSubscription.unsubscribe();
}
复制代码
takeUnit
一个非常优雅的取消订阅方法
Observable.fromEvent(node, 'input')
.takeUnit((event: any) => this.show)
.subscribe(value => { console.log(value); });
ngOnDestory(): void {
this.show = false;
}
复制代码
Subject
如果说 Observable 与 observer 是攻受结合体的话,那么 Subject 就是一个人即攻亦受。正因为如此,我们在写一个Service
用于数据传递时,总是使用 new Subject。下面展示一个例子:
@Injectable()
export class MessageService {
private subject = new Subject<any>();
send(message: any) {
this.subject.next(message);
}
get(): Observable<any> {
return this.subject.asObservable();
}
}
复制代码
当F组件需要向M组件传递数据时,我们可以在F组件中使用 send()。
constructor(myService: MyService)
ngOnInit() {
this.myService.send('message');
}
复制代码
M组件接收数据:
constructor(myService: MyService)
ngOnInit() {
this.myService.get.subscribe(data => {
console.log(data); // message
})
}
复制代码
EventEmitter
在angular中EventEmitter相当于是Subject
// my-component.component.ts
@outPut() onChange = new EventEmitter<String>();
onClick() {
this.onChange.emit('hello world');
}
复制代码
<!-- parent-coponent.component.html -->
<my-component onChange="change($event)"></my-component>
复制代码
// parent-coponent.component.ts
change(value) {
console.log(value) // hello world
}
复制代码
最后
RxJS有很多操作符,详情见我的另一篇文章《RxJS(1) 常见Operators》。