rxjs的详解

这次给大家带来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