Rxjs笔记二：创建Observable对象以及发送终止信号给O

在Rxjs中，每个Observable对象，代表的就说在一段时间范围内发生的一系列事件。
Rxjs结合了观察者模式和迭代者模式[Observable = Publisher + Iterator]

1、创建一个Observable对象：

该部分代码执行后会依次输出11、12、13

首先使用深链的方式从rxjs中导入Observable, range, filter, map, of，创建一个theSubscribe的函数，这个函数也就是Observable构造函数的参数，该函数决定了Observable的行为，而创建的theSubscribe函数中，调用observer的next方法，把数据推给observer，接着生成一个source$名称的Observable数据流对象，theObservable去迭代source$数据流对象，其中Observable和observer之间连接的桥梁就是subscribe!

import { Observable, range, filter, map, of } from 'rxjs';

mounted() {
    this.createObservable();
},
methods: {
    // 创造一个Observable对象
    createObservable() {
        const theSubscribe= observer => {
            observer.next(11);
            observer.next(12);
            observer.next(13);
        };
        const source$ = new Observable(theSubscribe);
        const theObservable = {
            next: item => console.log(item)
        }
        source$.subscribe(theObservable);
    }
    
}

2、创建一个具有处理逻辑的Observable对象：'

Observer是被推送数据的，因此在执行的过程中一般不会负责逻辑处理的部分，因此，逻辑处理的部分还是使用到“可观察的对象”Observable来处理。

// 创造一个带有时间间隔的Observable对象
observableByTime() {
    const theSubscribe = observer => {
        let time = 1;
        const handler = setInterval(()=>{
            observer.next(time++);
            if(time > 3) clearInterval(handler);
        },1000)
    }
    
    const source$ = new Observable(theSubscribe);
    const theObservable = {
        next: item => console.log(item)
    }
    source$.subscribe(theObservable);
}

3、Observable的终止

Observable对象调用观察者的next方法推送数据，也就是说Observable可以实现一直被执行，但是它一直执行一直推送数据并不会消耗太多的内存，是因为Observable对象每次推送一条数据后，内部便会处理掉，然后推送下一个，不会存在数据的冗余堆积。
在一些需求的使用上，不会去人为的终止Observable对象，例如：网页中某元素的点击事件流，在网页未关闭的前提下，就不能人为的干涉这个元素的点击事件流。
但是，在某些情况下需要执行完逻辑就进行终止Observable，如果只是停止observer的next推送，并不能给与observer一个终止的信号。这种情况下的Observer依旧随时接收Observable推送来的数据。因此，在Rxjs中，实现这种通信机制的就是Observer的complete函数。

observableByTime() {
    const theSubscribe = observer => {
        let time = 1;
        const handler = setInterval(()=>{
            observer.next(time++);
            if(time > 3) {
                clearInterval(handler);
                observer.complete(); // 清除监听器之后，发送终止信号给observer
            };
        },1000)
    }
    
    const source$ = new Observable(theSubscribe);
    const theObservable = {
        next: item => console.log(item),
        complete: () => console.log('no more Data.....') // 发送完终止信号后的逻辑部分
    }
    source$.subscribe(theObservable);
}

Observer对象的complete何时被调⽤，完全看 Observable的⾏为，如果Observable不主动调⽤complete，Observer即使准备好了complete函数，也不会发⽣任何事情，和数据⼀样，完结信号也是由 Observable“推”给Observer的。