RxJs——创建型操作

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

我们在使用RxJs中,知道RxJs的操作分为两类,一类是创建型,比如of(),fromEvent(),from()等,还有一类是操作型,比如map(),filter()。而这两类操作的基础和心是一个叫做Observable的对象,如果对Observable不甚理解,需要快速理解的可以查看这一篇

今天我们来学习第一类,尝试着自己实现一次。

of()

这个操作接收数组参数,返回一个Observable,一旦订阅之后,这些值将发出执行。

代码实现

export function of(...args) {
    return new MyObservable(observer => {
        args.forEach(arg => {
            observer.next(arg);
        });
        observer.complete();
        return {
            unsubscribe: ()=>{}
        };
    });
}

//代码使用
const observer = {
    next: value => console.log('value:',value),
    error: err => console.error('error:',err),
    complete: () => console.log('done')
}

const newObservable = of(1,2,3,4,5);
newObservable.subscribe(observer );

执行日志

它的本质上就是将of的参数值交给observer迭代执行。简单吧。

同样的道理,我可以实现一下一些创建型的Observable。

fromEvent()

这个属性绑定一些事件,事件源就是一个Observable。

代码实现

export function fromEvent(element,event) {
    return new MyObservable(observer => {
        const handler = e =>observer.next(e);
        element.addEventListener(event, handler);
        return {
            unsubscribe: ()=>element.removeEventListener(event, handler)
        };
    });
}

代码执行

const element = document.body;
const eleObservable = fromEvent(element,'click');
const observer = {
    next: value => console.log('value:',value),
    error: err => console.error('error:',err),
    complete: () => console.log('done')
}
eleObservable.subscribe(observer);

执行日志

interval()

这个用于定时发送一些值。

代码实现

export function interval(delay) {
    return new MyObservable(observer => {
        let index = 0;
        const time = setInterval(()=> {
            observer.next(index++);
        }, delay);
        return {
            unsubscribe: () => clearInterval(time)
        };
    });
}

修改一行代码

const newObservable = interval(3000);

执行日志

timer()

延迟一定时间后发送一个值

代码实现

export function timer(delay) {
    return new MyObservable(observer => {
        const time = setTimeout(()=> {
            observer.next(0);
        }, delay);
        return {
            unsubscribe: () => clearTimeout(time)
        };
    });
}

修改一行代码

const newObservable = timer(3000);

执行日志

from()

和of()有些类似,可以接收数组和Promise

代码实现

export function from(param) {
    if (Array.isArray(param)) {
        return new MyObservable(observer => {
            param.forEach( v=> observer.next(v)); 
            observer.complete();
            return {
                unsubscribe: () => { }
            }
        });
    }

    return new MyObservable(observer => {
        let canceld = false;
        Promise.resolve(param)
            .then(val => {
                if (!canceld) {
                    observer.next(val);
                    observer.complete();
                }
            }).catch(err => {
                observer.error(err); 
            }
        );
        return {
            unsubscribe: () => { canceld = true }
        }

    });
}

修改一行代码

const newObservable = from([6,7,8,9,10]);

数组执行日志

promise代码执行

const newPromise = new Promise((resolve, reject)=>{
    console.log('promise resolve');
    resolve('resolve done')
});
const newObservable = from(newPromise);
newObservable.subscribe(observer );

Promise执行日志

今天学习到这里,记录一下,方便以后查找,明天学习map和filter的实现。

 

 

版权声明:著作权归作者所有。

相关推荐

Django:创建JSON响应

Django 1.7之前版本在Django1.7之前可以结合json以及HttpResponse创建json响应import json from django.http import HttpResponse response_data = {} response_data['result'] = 'er

Kotlin:数组的基本操作

Kotlin使用Array类来表示数组,构造函数为:<init> Array(size: Int, init: (Int) -> T) size:数组大小init:初始化数组创建数组Kotlin提供了几种方法方便我们创建数组,包括:构造函数,标准库提供的arrayOf, arrayOfNulls 和emptyArray等 。构造函数// 创建 一个值

Java 8双冒号::方法引用操作符

Java 8中,双冒号::称为方法引用操作符,我们可以使用它来引用类的方法。::引用类的方法,返回一个函数接口(function interface),这等同于lambda表达式,但与lambda表达式不同的是,lambda表达式需要自定义一个lambda body,而::引用的是一个方法。简单地说函数接口,就是只拥有一个抽象方法的接口,如Runnable。::引用方

Java创建文件的常用方法

Java创建文件有几种常用的方法File.createNewFile()创建空白文件java.io.File类里的方法createNewFile()可以用来创建文件。createNewFile()新建的是空文件。创建文件首先要使用File类构建将要被创建的文件,然后再调用createNewFile()把新文件创建出来。createNewFile()的结果分为三种情况:新文件创建成功返回true。如

Python避免使用“is”操作符比较integer数据

Python的is操作符实际上是比较的是对象的id值,id(obj)。a is b实际可以理解为id(a) == id(b)Python里保存了一个整型数组作为缓存,范围为-5到256,如果使用此范围的数据赋值,那么实际使用引用此数组的数据,所以获取这些范围数据的id值,同一个数是相同的。Python3.6>>>a=-5 >>&

Python安全创建目录的方法

在介绍Python安全创建目录之前,先举一个不安全创建目录的方式:if not os.path.exists(directory):     os.makedirs(directory) 在例子里,先判断目录是否存在,然后创建目录。这种方式是不安全的,它会导致竞争条件。在os.path.exists()和os.makedirs()之间的时

MySQL创建只读权限的用户

首先,使用创建账号的用户登录MySQL,如root用户:mysql -u root -p第二,创建一个新的账号CREATE USER 'readuser'@'%' IDENTIFIED BY 'secret';其中,百分号“%”表示用户可以从任何ip的客户端登陆,如果要限定指定的ip登陆,只需要把百分号"%"改为指定的ip即可。第三,授权用户只能执行select语句GRANT SELECT ON

Python使用os.fork()创建子进程

导入os模块首先要导入os模块,如下:import os使用os.fork()创建进程使用fork创建一个新的进程后,新进程是原进程的子进程,原进程为父进程。如果发生错误,则会抛出OSError异常。-*- coding: utf-8 -*-import timeimport ostry: pid = os.fork()except OSError: passtime.sleep(20)

Linux使用halt命令关闭运行中操作系统

halt命令用来关闭正在运行的Linux操作系统。halt命令会先检测系统的runlevel,若runlevel为0或6,则关闭系统,否则即调用shutdown来关闭系统。 语法 halt [-n] [-w] [-d] [-f] [-i] [-p] 选项说明 -d:不要在wtmp中记录;-f:不论目前的runlevel为何,不调用shutdown即强制关闭系统;-i:在halt之前,关闭全部的

windows批处理操作bat命令

Windows环境下运行bat指令-Windows下 初始化MySQL SQL 文件@echo off start cmd /k "echo initmysql && title init-mysql && cd/d D:softmysql-5.7.26-winx64bin && mysql -h localhost -uroot -