bestvist

07-01 10:03 阅读: 60 点赞: 0 评论: 0

了解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(观察者)。

生产者 消费者
Pull 被请求的时候产生数据 决定何时请求数据
Push 按自己的节奏生产数据 对接收的数据进行处理

Observable vs Promise

单值 多值
Pull 函数 遍历器
Push Promise Observable

Promise

  • 返回单个值
  • 不可取消

Observable

  • 随着时间的推移发出多个值
  • 可以取消
  • 支持 map、filter、reduce 等操作符
  • 延迟执行,当订阅的时候才会开始执行
热点文章