RxJs——操作型

时间：2023-05-12 17:42:09

我们在使用Observable的时候，常常会涉及到一些操作，比如map()，filter()等，为了理解原理，今天我们在前几节(初步理解RxJs , RxJs——创建型操作 )的基础上，用两种不同的方式实现以上两个函数，希望能给大家提供借鉴。

map代码实现

废话不说，先来实现map

map(fn) {
    return new MyObservable(observer => {
        this.subscribe({
            next: val=> observer.next(fn(val)),
            error: err => observer.error(err),
            complete: () => observer.complete()
        });
    });
}

RxJs——操作型

Filter代码实现

同样的道理，再来实现filter

filter(fn) {
    return new MyObservable(observer => {
        this.subscribe({
            next: val=> fn(val)? observer.next(val): ()=>{},
            error: err => observer.error(err),
            complete: () => observer.complete()
        });
    }) ;
}

RxJs——操作型

代码调用

调用代码如下：

const letObservable = of(1,2,3);
letObservable.map(v=>v*3).filter(v=>v<5)
.subscribe(v=>{
    console.log('value:',v);
});

日志信息

RxJs——操作型

我们分析一下：

1、首先使用of()创建了一个三个元素的letObservable。

2、letObservable调用map后返回一个新的Observable，我这里假设命名为mapObservable。

3、而mapObservable调用filter后同样返回一个新的Observable,同样的道理命名为filterObservable。

4、最后的订阅函数实际上订阅的是filterObservable。当这个函数开始执行的之后，它实际上会执行filterObservable的this.subscribe()方法。

5、filterObservable执行this.subscribe()方法的时候，实际上把这个方法的参数对象

{
    next: val=> fn(val)? observer.next(val): ()=>{},
    error: err => observer.error(err),
    complete: () => observer.complete()
}

当做Observer传递给mapObservable的构造器的函数参数的observer，这里的

next: val=> observer.next(fn(val)),实际上就是fn(val)? observer.next(val): ()=>{},

observer.next ——> fn

同过以上分析我们知道实际上就形成了一种函数的嵌套调用。先执行前面的操作，前面操作的值传递给后面的函数作为参数执行下去，一直到最后打印出结果为止。

以上是第一个结论。

第二个结论就是：

我的这个例子实际上有一个创建型Observable和两个操作型Observable,它们通过链式操作连接在一起，形成一种函数嵌套调用的链式结构，而且还避免了递归，设计真的很巧妙。而且，如果不执行subscribe函数，整个计算就不会开始，先建立计算的结构，需要计算的时候再计算。

标签：

相关文章