这次给大家带来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中文网其它相关文章!
推荐阅读:
以上是rxjs的详解的详细内容。更多信息请关注PHP中文网其他相关文章!