1.Rxjs介绍
是一种库，针对于异步数据流的一种编程工具,也叫响应式编程
2.基本概念
首先说明,这些基本概念单词,跟代码上重复的单词关系不大,只是rxjs中的一些基本概念
Observable(可观察对象): 字如其名表示可观察对象,类似于一个事件中心, 比如下面的例子,给一个dom元素绑定了一input事件,进行一个对input事件的监听.
// 从rxjs中引入observable
import { Observable, Subscription } from 'rxjs';
// 创建一个可观察对象,input$,并对其绑定一个input事件
// node指的是一个dom节点
const input$ = Observable.fromEvent(node, 'input');
Observe(观察者): 表示一个回调函数的集合,上面已经对事件进行监听,并且返回了一个可观察对象Observable,那么观察者就是一个用来接收观察结果的函数,通过subcribe订阅了可观察对象input$, 观察者中包含了三种不同的回调函数,分别表示成功 失败 完成,
当事件被触发的时候 如果observe能成功捕获新的值就会调用next 捕获失败会调用 error, complete则是取消订阅的一种方式.如果不取消的话这种订阅会一直存在.
理解: Observable需要结合 observe一块使用才有效果 ,
流程是 产生可观察对象, 将观察者 去订阅 可观察对象
input$.subscribe({
next: (event: any) => console.log(`You just typed ${event.target.value}!`),
error: (err) => console.log(`Oops... ${err}`),
complete: () => console.log(`Complete!`)
});
Subscription(订阅): 表示Observable的执行 主要用于取消Observable的执行,也就说是取消订阅的另一种方式
const sub = input$.subscribe({
next: (event: any) => console.log(`You just typed ${event.target.value}!`),
error: (err) => console.log(`Oops... ${err}`),
complete: () => console.log(`Complete!`)
});
sub.unsubscribe() // 取消订阅
Operaors(操作符): 采用函数式编程风格的纯函数 使用像map filter这样的操作符来处理集合,主要是对可观察对象进行链式编程,这个应该很好理解
Subject(主体): 相当于EventEmitter, (可以去看看angualr中的子传父的方式),这个比较适合用越传值,observable需要结合着observer才能实现订阅-发布的效果,但是这个subject可以自攻自受地实现效果看下面的案例
@Injectable()
export class MessageService {
private subject = new Subject<any>(); //1. 产生主题对象
send(message: any) {
this.subject.next(message); // 1.1 通过主体对象 设置发送数据的方式 sub.next()
}
get(): Observable<any> {
return this.subject.asObservable();// 1.2 通过主体对象 设置接收数据的方式 sub.asObservable
}
}
+++++++++++++++++++++++++++++++++++++
constructor(public srv: MessageService) { }
ngOnInit() {
this.srv.send('w s k f m?') // 2. 调用方法 发送数据
}
++++++++++++++++++++++++++++++++++++++++
constructor(private srv: MessageService) {}
message: any;
ngOnInit() { // 注意点: 一定要进行订阅才可以接收到 这个数据
this.srv.get().subscribe((result) => { // 3.调用方法 接收数据
this.message = result;
})
}
Schedulers(调度器): 这个??? 我暂时还不是很明白 先这样吧 后续再进行添加