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控制台看到的结果如下:


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简书上转载有一个台湾同胞写的关于RxJs非常好的系列文章-30天精通RxJS。但是上面的例子都是基于RxJs V5...
    四环霉素阅读 587评论 0 0
  • 介绍 RxJS是一个异步编程的库,同时它通过observable序列来实现基于事件的编程。它提供了一个核心的类型:...
    泓荥阅读 16,647评论 0 12
  • 看到Observable和RxJS就感觉很亲切,因为之前做Android开发的时候接触过RxJava。Obs...
    tuacy阅读 5,638评论 0 5
  • 这是转载【30天精通 RxJS】的 05 篇,如果还没看过 04 篇可以往这边走:30 天精通 RxJS (04)...
    readilen阅读 3,139评论 3 14
  • 响应式编程是一种面向数据流和变化传播的编程范式。面向变化传播的编程就是看最初的数据是否会随着后续对应变量的变化而变...
    oWSQo阅读 805评论 0 0