RxJS 学习手记


参考:


在 RxJS 中用来解决异步事件管理的的基本概念是:

  • Observable (可观察对象): 表示一个概念,这个概念是一个可调用的未来值或事件的集合。*
  • Observer (观察者): 一个回调函数的集合,它知道如何去监听由 Observable 提供的值。
  • Subscription (订阅): 表示 Observable 的执行,主要用于取消 Observable 的执行。
  • Operators (操作符): 采用函数式编程风格的纯函数 (pure function),使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
  • Subject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
  • Schedulers (调度器): 用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeout 或 requestAnimationFrame 或其他。

概念比较晦涩,通俗的说。
Observable 理解成一个自媒体。
Observer 是这个自媒体发布的作品。
Operators 是对发布作品的一系列操作,比如延迟发送作品,更新作品。
当这个事件被人订阅时(subscribe)才知道这个时间发生了。
当这个这个事件取消订阅时(unsubscribe)没有知道事件发生了。

如下例子:

  1. Up 主想发布作品123,但是Up 有一点自己小想法。
  2. 思考了1秒钟
  3. Up主想在作品123 的基础上做一些修改,并作为作品 1
  4. Up主想在作品1的基础上做一些修改,并作为作品 1Test2
  5. 最后我们看到就是Up 的作品1Test2
  rxJSTest() {
    let value =123;
    Rx.Observable.create((observe) => {
      observe.next(value);
    }).pipe(
      delay(1000),
      // pluck('error_code','Checklist','ResultTemplate',"Token"),
      concatMap((data) => {
        console.info("作品",  data);  //作品 123
        return Rx.Observable.create((observe) => {
          console.info("作品", data); //作品 123
          observe.next(1);
        });
      }),
      concatMap((data) => {
        console.info("作品 ", data); //作品  1
        return Rx.Observable.create((observe) => {
          console.info("作品 ",  data); //作品  1
          data = data+"Test2";
          observe.next(data); 
        });
      })
    )
      .subscribe((vale) => {
        console.info("作品 ",vale);//作品  1Test2
      }, err => {
        console.info(err);
      }, (vale) => { console.info("COMPLETE", vale) });
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。