rxjs-初体验

RxJS是一个主要用于处理异步程序的函数式编程库，可以把 RxJS想成处理异步行为的 Lodash，在angular中被大量使用，所以，了解它是必须的。

观察对象Observable

在介绍RxJs之前，我们有必要先了解下可观察对象（Observable）。

1. 观察者（Observer）模式是一个软件设计模式，它有一个对象，称之为主体 Subject，负责维护一个依赖项。

2. 可观察对象（Observable）是声明式的 —— 也就是说，虽然你定义了一个用于发布值的函数，但是在有消费者订阅它之前，这个函数并不会实际执行。 订阅之后，当这个函数执行完或取消订阅时，订阅者就会收到通知。

3. 作为发布者，你创建一个 Observable的实例，其中定义了一个订阅者（subscriber）函数。 当有消费者调用 subscribe()方法时，这个函数就会执行。

• 要执行所创建的可观察对象，并开始从中接收通知，你就要调用它的 subscribe()方法，并传入一个观察者（observer）。 这是一个 JavaScript对象，它定义了你收到的这些消息的处理器（handler）。 subscribe()调用会返回一个 Subscription对象，该对象具有一个 unsubscribe()方法。 当调用该方法时，你就会停止接收通知。

使用观察者模式大概就是这么个流程，创建可观察对象（Observable），定义订阅者（subscriber）函数处理逻辑并返回 Subscription对象，使用该对象的unsubscribe()方法取消订阅。

函数式编程

首先来与传统的方式作个对比，我们将使用两种不同的方式来实现至少间隔1秒打印鼠标在页面点击位置的功能：

传统写法：

ngOnInit(): void {
  let count = 0;
  const rate = 1000;
  let lastClick = Date.now() - rate;
  document.addEventListener('click', event => {
    if (Date.now() - lastClick >= rate) {
      count += event.clientX;
      console.log(count);
      lastClick = Date.now();
    }
  });
}

RxJs用法：

import {fromEvent} from 'rxjs';
import {map, scan, throttleTime} from 'rxjs/operators';
ngOnInit(): void {
  fromEvent(document, 'click').pipe(
    throttleTime(1000),
    map((event: MouseEvent) => event.clientX),
    scan((count, clientX) => count + clientX, 0)
  ).subscribe(
    count => console.log(count)
  );
}

tips: 使用RxJs，建议使用编辑器自动引入相应的资源（webstorm的自动导入比vscode好用）

从上面的简单的例子可以看出函数式编程的特点：

1. 所有的逻辑均是通过一个个函数实现；

2. 每一个函数都是一个纯函数（不改变数据源），会有一个返回值以供下一步操作使用；

Observable vs Promise

Observable和Promise的不同点:

1. 可观察对象(Observable)是声明式的，在被订阅之前，它不会开始执行。Promise是在创建时就立即执行的。这让Observable可用于定义那些应该按需执行的逻辑；

class AppComponent {
    newPromise() {
      const p = new Promise(resolve => {
        console.log('initial a promise'); // 立即触发
      });
    }
    newObservable() {
      const o = new Observable(subscriber => {
        console.log('initial a newObservable'); // 不触发
      });
    }
}

2. 串联，跟第一条类似，只有当调用subscribe方法时，才会执行所有管道函数；

class AppComponent {
  newPromise() {
    const p = new Promise(resolve => {
      resolve(['a', 'b', 'c']);
    }).then(res => {
      console.log('第一个then');
      return res;
    }).then(res => {
      console.log('第2个then');
      return res;
    }); // 打印出结果，被解析时自动完成
  }
  newObservable() {
    const o = new Observable(subscriber => {
      console.log('initial a newObservable');
      subscriber.next(['a', 'b', 'c']);
    }).pipe(
      map(res => {
        console.log('第一个map');
        return res;
      }),
      map(res => {
        console.log('第2个map');
        return res;
      })
    );  // 不能打印出结果，不订阅，pipe中的所有函数都不会触发
  }
}

3. Observable可以手动取消；

const sub = interval(1000).subscribe(res => {
  console.log('interval', res);
});
class App {
  cancelObservable() {
    sub.unsubscribe();
  }
}

Observable vs 事件API

Observable的创建与取消：

// 创建点击事件 
const clicks$ = fromEvent(buttonEl, ‘click’); 
// 处理逻辑 
const subscription = clicks$.subscribe(e => console.log(‘Clicked’, e));
// 取消订阅 
subscription.unsubscribe();

事件API的创建与取消：

function handler(e) {
  console.log(‘Clicked’, e);
}
// 处理逻辑
button.addEventListener(‘click’, handler);
// 取消监听
button.removeEventListener(‘click’, handler);

Observable vs 数组

Observable会随时间生成值。数组是用一组静态的值创建的。某种意义上，Observable是异步的，而数组是同步的。

数组的concat方法：

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];
console.log(arr1.concat(arr2)); // 众所周知，打印出：["a", "b", "c", 1, 2, 3]

Observable的concat方法：

import {concat, from} from 'rxjs';

const arr1$ = from(['a', 'b', 'c']);
const arr2$ = from([1, 2, 3]);
concat(arr1$, arr2$).subscribe(res => {
  console.log(res); // 将会依次打印："a", "b", "c", 1, 2, 3每个元素
});

总结

1. RxJS是一个主要用于处理异步程序的函数式编程库；

2. 可观察对象（Observable）没有被订阅就不会执行；

3. 函数式编程让代码逻辑更加清晰。

（tips：从我现在的水平来讲，RxJs对于处理异步数据是很有用的，特别是对数据流时间节点要求较高的操作是会比Promise更加灵活可控的。而且在angular中，随处可见Rxjs，所以，学好它非常有必要，是必须掌握的技能。这个文档也可以看看：https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-00）。

欢迎关注我的公众号，公众号将第一时间更新angular教程：