javascript 高级编程系列 - Rxjs

Rxjs 就是利用javascript实现了响应式编程的概念，利用监听流的模式处理异步操作。

1. 函数响应式编程

函数式编程

• 声明式
• 纯函数
• 数据不可变性

响应式编程

• 通过可监听流实现异步编程

2. Observable 和 Observer

Rxjs中的数据流就是Observable对象，它是被观察者也是数据发布者，通过subscribe函数链接
观察者Observer。当Observable 对象产生数据流时，观察者Observer就会捕捉到。Rxjs结合了
观察者模式和迭代者模式：Observalbe = Publisher + Iterator.

• 创造Observable

// 导入Observable类
import {Observable} from 'rxjs';

// 定义Obervable对象的行为
// observer参数为 theObserver 封装后的一个代理
const onSubscribe = observer => {
   // 调用observer的next函数将数据推送给theObserver
   observer.next(1);
   observer.next(2);
   observer.next(3);
};

// 创建数据流对象
const source$ = new Observable(onSubscribe);

// 定义观察者
const theObserver = {
  next: item => console.log(item)
};

// 将数据流对象与观察者关联起来
source$.subscribe(theObserver);

• 间隔一秒推送一个数据

const onSubscribe = observer => {
  let number = 1;
  const handle = setInterval(() => {
    observer.next(number++);
    if(number > 3){
      clearInterval(handle);
    }
  }, 1000);
};

• Observable 的完结
  通过在观察者observer中增加complete函数实现，并在Observable的onSubscribe参数函数
  中调用实现推送数据完毕的通信。

const theObserver = {
  next: item => console.log(item),
  complete: () => console.log('No More Data')
};

const onSubscribe = observer => {
  let number = 1;
  const handle = setInterval(() => {
    observer.next(number++);
    if(number > 3){
      clearInterval(handle);
      observer.complete();
    }
  }, 1000);
};

• Observable 的出错处理
  通过增加观察者的error函数进行错误处理

import {Observable} from 'rxjs';
const onSubscribe = observer => {
  observer.next(1);
  observer.error('something wrong');
  observer.complete();
};
const source$ = new Observable(onSubscribe);
const theObserver = {
  next: item => console.log(item),
  error: err => console.log(err),
  complete: () => console.log('No more Data')
};
source$.subscribe(theObserver);

• Observer 的简单形式

source$.subscribe(
  item => console.log(item),  // 接受推送的数据
  err => console.log(err),  // 出错处理
  () => console.log('No more Data') // 完结处理
);

3. 退订Observable

Observable 通过subscribe函数与Observer建立联系，如果要断开关系则需要通过在Obervable的参数函数
onSubscribe 中返回对象方法unsubscribe来实现。取消订阅后，被观察者对象虽然没有完结，但是观察者
将无法再接收到推送的数据。

const onSubscribe = observer => {
  let number = 1;
  const handle = setInterval(() => {
    observer.next(number++);
  }, 1000);
  return {
    unsubscribe: () => {
      clearInterval(handle);
    }
  };
};

const source$ = new Observable(onSubscribe);
const subscription = source$.subscribe(item => console.log(item));
// 3.5s 后取消订阅
setTimeout(() => {
  subscription.unsubscribe();
}, 3500);

4. Hot Observable 和 Cold Obervable

• Hot Observable： 每次订阅都已经有一个'热' 的生成者准备好了, 每个观察者由于订阅时间节点不同
  后订阅的观察者会错过一些数据。

const producer = new Producer();
const hot$ = new Observable(observer => {
  // 然后让observer 去接受producer产生的数据
});

• cold Observable: 每次订阅都产生一个新的生产者, 所有观察者得到推送的数据都是一样的

const cold$ = new Observable(observer => {
  const producer = new Producer();
  // 然后让observer 去接受producer产生的数据
});

5. 操作符

在Rxjs中，有一系列用于产生Observable函数，这些函数有的凭空创造Observable对象，有的根据外部数据源
产生Obervable对象，更多的是根据其他的Observable中的数据来产生新的Observable对象，也就是把上游数据
转化为下游数据，所有这些函数统称为操作符。

• 使用map操作符

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

const onSubscribe = observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
};
const source$ = Observable.create(onSubscribe);
source$.map(x => x*x).subscribe(console.log);   // 1, 4 ,9