RxJS入门——基础操作指北

RxJS入门——基础操作指北

---

本章所基于的RxJS的版本问5.5.9，在本章中介绍RxJS的基础知识，比如Observable、Observer、Subscription、Subject以及Operation等

• 了解RxJS的设计思想
• 掌握RxJS的基础用法
• 梳理RxJS的接口API

一、RxJS的设计思想

简单理解RxJS的设计思想，之前实现了PromiseA+规范下的promise，创建一个Promise后，有一个状态的初始值pending，两个状态的改变值，fullfilled和rejected.在Promise的订阅机制中，一旦状态发生改变，状态的改变就是不可逆的.而RxJS不同，Observable相当于一个消息生成器，给消息生成器设置处理函数，通过消息生成器传递信息给处理函数，处理函数作为订阅者执行相应的逻辑，并返回结果.

因为Observable这个消息生成器是多值的，因此订阅者执行后返回的值也是多值的。

二、RxJS的基本用法

来看RxJS的基本用法，简单的介绍Observable、Observer、Subscription、Subject以及Operation的使用

1.Observable、Observer

（1）首先来看基本的用法,

第一步创建可观察对象：

import Rx from 'rxjs/Rx';
const observable=Rx.Observable.create(
 function  subscribe(observer){
       try{
         observer.next(1);
         observer.next(2);
         observer.next(3);
         observer.complete();
       }catch(e){
         observer.error(e);
       }
})

在每一个可观察对象中会推送消息给订阅者，比如在上述函数中通过在next、complete和error方法中传递参数的形式将消息推送给订阅者。

第二步，创建订阅者

const observer={
  next:x=>console.log(x),
  error:error=>console.log(error),
  complete:()=>console.log('Observer got a complete notification')
}

订阅者有几个函数属性，用于接受可观察对象中的值并执行。

第三步，建立观察订阅关系：

observable.subscribe(observer);

执行返回的结果为：

1
2
3
Observer got a complete notification

（2）Observable异步推送

const observable=Rx.Observable.create(function              subscribe(observer){
       try{
         observer.next(1);
         observer.next(2);
         observer.next(3);
         setTimeout(()=>{
           observer.next(4)
         },1000)
       }catch(e){
         observer.error(e);
       }
});
const observer={
  next:x=>console.log(x),
  error:error=>console.log(error),
  complete:()=>console.log('Observer got a complete notification')
}
console.log('before');
observable.subscribe(observer);
console.log('after');

通过setTimeout异步推送值给next方法，输出结果为：

before
1
2
3
after
4

(3)取消Observable的订阅

var subscription = observable.subscribe(observer);
subscription.unsubscribe();

2. Subject

（1）基础用法

RxJS中的Subject是一种特殊的Observable,通过Subject定义的可观察对象可以被多个Observer订阅.