rxjs笔记

date: 2020.04.26; modification:2020.04.26

目录:

1 参考资料

2 生成Observable

2.1 转换成Observable

    const Rx = require('rxjs');

    // 来自一个或多个值
    Rx.of('foo', 'bar');

    // 来自数组
    Rx.from([1,2,3]);

    // 来自事件
    Rx.fromEvent(document.querySelector('button'), 'click');

    // 来自 Promise
    Rx.fromPromise(fetch('/users'));


    // 来自回调函数(最后一个参数得是回调函数,比如下面的 cb)
    const fs = require('fs');
    // fs.exists原型: (path, cb(exists))
    let exists = Rx.bindCallback(fs.exists);
    exists('file.txt').subscribe(exists => console.log('Does file exist?', exists));

    // 来自回调函数(最后一个参数得是回调函数,比如下面的 cb)
    const fs = require('fs');
    // fs.rename原型: (pathA, pathB, cb(err, result))
    let rename = Rx.bindNodeCallback(fs.rename);
    rename('file.txt', 'else.txt').subscribe(() => console.log('Renamed!'));

2.2 创建Observable

2.2.1 在外部产生新事件

    const Rx = require('rxjs');

    let ob = new Rx.Subject();
    ob.subscribe(value => console.log(value));
    ob.next('foo');
    ob.next('foo2');

2.2.2 在内部产生新事件

    const Rx = require('rxjs');

    let ob = Rx.Observable.create(observer => {
      observer.next('foo');
      setTimeout(() => observer.next('bar'), 1000);
    });
    ob.subscribe(value => console.log(value));

3 流控

    const Rx = require('rxjs');
    const Rxo = require('rxjs/operators');

    // 过滤掉小于3个字符长度的目标值
    let ob = Rx.of('he', 'hel', 'hell', 'hello');
    ob.pipe(Rxo.filter((x) => x.length > 2)).subscribe(console.log);
    // 延时(延迟 observable 一开始发送元素的时间点)
    ob.pipe(Rxo.delay(1000)).subscribe(console.log);

    let ob = Rx.interval(50);
    // 节流: 每200ms只能通过一个事件(结果为: 0, 4, 8, 12, ...)
    ob.pipe(Rxo.throttleTime(200)).subscribe(value => console.log('throttleTime:', value));
    // 直到其他 observable 触发事件才停止事件流
    ob.pipe(Rxo.takeUntil(Rx.of(1).pipe(Rxo.delay(1000)))).subscribe(console.log);

    // 去抖动: 停止输入后200ms方能通过最新的那个事件
    ob.pipe(Rxo.debounceTime(200)).subscribe(value => console.log('debounceTime:', value));

    // 仅取前3个.
    ob.pipe(Rxo.take(3))

4 tips

4.1 判断双击:

    let doubleClicks = leftClickOb.pipe(
        Rxo.timeInterval(),
        Rxo.filter(x => x.interval < 300),
        Rxo.throttleTime(300),
        Rxo.skip(1),
    ).subscribe(...);

4.2 对每个元素进行延时

    Rx.from('hello').pipe(
        Rxo.zip(Rx.interval(600), (x, y) => x),
    ).subscribe(console.log)

响应式编程入门指南 - 通俗易懂 RxJS: https://hijiangtao.github.io/2020/01/13/RxJS-Introduction-and-Actions/

弹珠图: https://rxmarbles.com/

操作符手册: https://cn.rx.js.org/manual/overview.html#operators-