Rxjs学习,结合angular(搁置,后续还会添加)

 

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(调度器): 这个??? 我暂时还不是很明白 先这样吧 后续再进行添加