RxJS

缺乏、安全感 2022-06-01 03:27 216阅读 0赞

## 第一个栗子 ##

var button = document.querySelector('button');
    button.addEventListener('click', () => console.log('Clicked!')); // With RxJS var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .subscribe(() => console.log('Clicked!'));

初识：RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。

## Observable 简述 ##

Observables 是多个值的惰性推送集合。

执行结果：

just before subscribe
    got value 1
    got value 2
    got value 3
    just after subscribe
    got value 4
    done

RxJS 引入了 Observables，它是多个值的生产者，并将值“推送”给观察者(数据消费者)。

## Observables 可以作为函数的泛化（大白话：Observables 可以作为函数使用，但是要比普通函数强大） ##

Observables 像是没有参数, 但可以泛化为多个值的函数。

使用 Observables 之前：

function foo() { 
      console.log('Hello');
      return 42;
    }
    
    var x = foo.call(); // 等同于 foo()
    console.log(x);
    var y = foo.call(); // 等同于 foo()
    console.log(y);

使用 Observables 之后：

可以发现，订阅 Observable 就类似于调用函数。Rx.Observable.create 则类似于定义函数。

## 同步 OR 异步 ##

上代码举栗子：

console.log('before');
    console.log(foo.call());
    console.log('after');

console.log('before');
    foo.subscribe(function (x) { 
      console.log(x);
    });
    console.log('after');

这两段的代码输出其实是一样的。这也就证明了 foo 的订阅是完全同步的，就像普通的函数。

**Observables 传递值可以是同步的，也可以是异步的。**

结论:
    
    func.call() // 意思是 "同步地给我一个值"
    observable.subscribe() // 意思是 "给我任意数量的值，无论是同步还是异步"

## Observable 详细解说 ##

### 创建 Observable ###

核心方法：Rx.Observable.create

var observable = Rx.Observable.create(function subscribe(observer) {
      var id = setInterval(() => { observer.next('hi') }, 1000); });

### 订阅 Observable ###

observable.subscribe(x => console.log(x));

重复说一遍，订阅 Observable 像是调用函数, 并提供接收数据的回调函数。

### 执行 Observables ###

Observable.create(function subscribe(observer) \{…\}) 中…的代码表示 “Observable 执行”，它是**惰性运算，只有在每个观察者订阅后才会执行**。随着时间的推移，执行会以同步或异步的方式产生多个值。

Observable 执行可以传递三种类型的值：

“Next” 通知： 发送一个值，比如数字、字符串、对象，等等。  
“Error” 通知： 发送一个 JavaScript 错误 或 异常。  
“Complete” 通知： 不再发送任何值。

“Next” 通知是最重要，也是最常见的类型：它们表示传递给观察者的实际数据。”Error” 和 “Complete” 通知可能只会在 Observable 执行期间发生一次，并且只会执行其中的一个。

栗子：

### 清理 Observable 执行 ###

var observable = Rx.Observable.from([10, 20, 30]);
    var subscription = observable.subscribe(x => console.log(x));
    // 清理 Observable 执行的方法
    subscription.unsubscribe();

## Observer ##

方法 observable.subscribe 接受的参数就是 Observer (观察者)，它其实只是一组回调函数的集合，每个回调函数对应一种 Observable 发送的通知类型：next、error 和 complete 。

observable.subscribe(observer);

RxJS 中的观察者也可能是部分的。如果你没有提供某个回调函数，Observable 的执行也会正常运行，只是某些通知类型会被忽略，因为观察者中没有没有相对应的回调函数。

observable.subscribe(x => console.log('Observer got a next value: ' + x));

而这种情况，只提供了一个毁掉函数。在 observable.subscribe 内部，它会创建一个观察者对象并使用第一个回调函数参数作为 next 的处理方法。

## Subscription ##

即**订阅**，它的参数就是上面的 Observer。它表示了 Observable 的执行。  
Subscription 有一个重要的方法，即 unsubscribe，它不需要任何参数，只是用来清理由 Subscription 占用的资源。

栗子：

var observable = Rx.Observable.interval(1000);
    var subscription = observable.subscribe(x => console.log(x));
    // 稍后：
    // 这会取消正在进行中的 Observable 执行
    // Observable 执行是通过使用观察者调用 subscribe 方法启动的
    subscription.unsubscribe();

更多内容，参见：[http://cn.rx.js.org/manual/overview.html][http_cn.rx.js.org_manual_overview.html]  
以及：[https://juejin.im/post/58cd146a61ff4b0060277d32/?utm\_source=gold-miner&utm\_medium=readme&utm\_campaign=github][https_juejin.im_post_58cd146a61ff4b0060277d32_utm_source_gold-miner_utm_medium_readme_utm_campaign_github]

[http_cn.rx.js.org_manual_overview.html]: http://cn.rx.js.org/manual/overview.html
[https_juejin.im_post_58cd146a61ff4b0060277d32_utm_source_gold-miner_utm_medium_readme_utm_campaign_github]: https://juejin.im/post/58cd146a61ff4b0060277d32/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github