首页  >  文章  >  web前端  >  rxjs的详解

rxjs的详解

php中世界最好的语言
php中世界最好的语言原创
2018-03-13 16:31:243234浏览

这次给大家带来rxjs的详解,使用rxjs的注意事项有哪些,下面就是实战案例,一起来看一下。

rxjs(Reactive Extensions for JavaScript)是Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据、状态、事件等转成可被观察的序列(Observable Sequence),然后订阅序列中对象的变化,一旦变化,就会执行事先安排好的各种转换和操作。

rxjs适用于异步场景,可以用于优化前端交互中的请求、事件。

rxjs特点

统一异步编程的规范,不管是Promise、ajax还是事件,通通封装成序列(Observable Sequence),一旦有异步环节发生变更,观察序列即可截获发生变更的信息。

前端业务层和展现层解耦,比如展现层不需要关心指定事件触发时和DOM无关的处理逻辑。同时业务层也能组装异步操作中多个异步逻辑之间的关系,无需暴露给展现层。展现层关心的是:异步操作其中环节的数据变化。

rxjs开发业务层具有高弹性,高稳定性,高实时性等特点。

rxjs实例概念

Observable: 可观察的数据序列.

Observer: 观察者实例,决定何时观察指定数据.

Subscription: 观察数据序列返回订阅实例.

Operators: Observable的操作方法,包括转换数据序列,过滤等,所有的Operators方法接受的参数是上一次发送的数据变更的值,而方法返回值称为发射新数据变更.

Subject: 被观察对象.

Schedulers: 控制调度并发,即当Observable接受Subject的变更响应时,可以通过scheduler设置响应方式,目前内置的响应可以调用Object.keys(Rx.Subject)查看。

Observable四个生命周期:创建 、订阅 、 执行 、销毁。

创建Obervable,返回被观察的序列源实例,该实例不具备发送数据的能力,相比之下通过new Rx.Subject创建的观察对象实例具备发送数据源的能力。

通过序列源实例可以订阅序列发射新数据变更时的响应方法(回调方法)。

响应的动作实际上就是Observable的执行。

通过序列源实例可以销毁,而当订阅方法发生错误时也会自动销毁。

序列源实例的catch方法可以捕获订阅方法发生的错误,同时序列源实例可以接受从catch方法返回值,作为新的序列源实例。

rxjs操作符

rxjs中提供了很多操作符,用于创建Observable对象

import Rx from 'rxjs';

create

let observable = Rx.Observable
    .create((observer)=> {
        observer.next('hello');
        observer.next('world');
    });    
//订阅Observable    observable.subscribe((value)=> {    console.log(value);
});

输出:hello
    world

of

转换值变量

let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

输出:hello
    world
    complete

from

转换数组变量

let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

输出:1

    2     3     complete
fromEvent

转换事件变量

Rx.Observable.fromEvent(document.querySelector('button'), 'click');
fromPromise

转换Promise(承诺)变量

let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('hello world');
    },3000)
}));
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

输出:hello world
    complete  

empty

empty操作符返回一个空的Observable,订阅该对象,它会立即返回complete信息。

never

never操作符会返回一个无穷的Observable,订阅该对象,什么事情都不会发生,它是一个一直存在却什么都不做的Observable对象。

interval

interval操作符支持一个数值类型的参数,用于表示定时的间隔。

let observable = Rx.Observable.interval(1000);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

输出:0

    1
     2
     ...

上面代码表示每隔1s,会输出一个递增的值,初始值从0开始。

timer

timer操作符支持两个参数,第一个参数用于设定发送第一个值需等待的时间,第二个参数表示第一次发送后,发送其它值的间隔时间。

let observable = Rx.Observable.timer(1000, 5000);

observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

输出:0   //1s后
    1   //5s后
    2   //5s后
    ...

Pull vs Push

Pull和Push是数据生产者和数据消费者两种不同的交流方式

Pull

在Pull体系中,数据的消费者决定何时从数据生产者那里获取数据,而生产者自身并不会意识到什么时候数据将会被发送给消费者。
每个JavaScript函数都是一个Pull体系,函数是数据的生产者,调用函数的代码通过拉出一个单一的返回值来消费该数据。
ES6中的iterator迭代器和generator生成器是另一种Pull体系,调用iterator.next()的代码是消费者,可从中拉取多个值。

Push

在Push体系中,数据的生产者决定何时发送数据给消费者,消费者不会在接收数据之前意识到它将要接收这个数据。
Promise是最常见的Push体系,一个Promise(数据的生产者)发送一个resolved(成功状态)或reject(失败状态)来执行一个回调(数据消费者),但是不同于函数的地方的是:Promise决定着何时数据才被推送至这个回调函数

RxJS引入了Observables(可观察对象),一个全新的Push体系。一个可观察对象是一个产生多值的生产者,当产生新数据的时候,会主动推送给Observer(观察者)。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

前端开发中的SVG动画

一定要了解的TypeScript

以上是rxjs的详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn