30 天精通 RxJS (05) - 代码升级V6

由于原贴02-04主要介绍的是函数式编程，观察者模式，迭代器模式。其相关的代码和RxJS版本关系不大。所以02-04这几篇文章的代码就不再做升级处理。
05的新建Observale的代码已经有所改动。
如上一篇所述，所有的代码升级为了方便，都是基于Create-Reat-App新建的项目，再基于React 16.8的Hooks写的。

import React, { useEffect } from 'react';
import { Observable } from 'rxjs';

function App() {
  useEffect(() => {
    console.log('rx.js');
    const observableInstance = new Observable(subscriber => {
      subscriber.next('Jerry');
      subscriber.next('Anna');
      setTimeout(()=>subscriber.next('RxJs 30 days'),30);
    });
    console.log('start');
    observableInstance.subscribe(e => console.log(e));
    console.log('end');
  }, [])

  return (
    <div className="App">
      <h1>Rx.Js</h1>
    </div>
  );
}

export default App;

再一个相关的代码升级是在observer里面接收exception，单独新建observer的代码我这边略去了，我们直接在subscribe方法里面传多个函数参数的方式让RxJS自己拼装成observer。

//import 和 export代码和上一段代码一样，这边就不重复写了
useEffect(() => {
    console.log('rx.js');
    const observableInstance = new Observable(subscriber => {
      try {
        subscriber.next('Jerry');
        subscriber.next('Anna');
        throw 'some exception';
      } catch (e) {
        subscriber.error(e);
      }
    });
    console.log('start');
    observableInstance.subscribe(v => console.log(v), e => console.error(e));
    console.log('end');
  }, [])

在chrome控制台看到的结果如下：