异步数据流的响应式编程库Rxjs(七)- operator概览

·  阅读 314

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第5天,点击查看活动详情

操作符Operator

尽管 RxJS 的根基是 Observable,但最有用的还是它的操作符。操作符是允许复杂的异步代码以声明式的方式进行轻松组合的基础代码单元。Rxjs的操作符非常多,功能也很强大,我这里只总结一下我日常工作中经常用到的一些操作符。

操作符是函数,它基于当前的 Observable 创建一个新的 Observable。这是一个无副作用的操作:前面的 Observable 保持不变。

操作符本质上是一个纯函数 (pure function),它接收一个 Observable 作为输入,并生成一个新的 Observable 作为输出。订阅输出 Observable 同样会订阅输入 Observable 。

自己实现一个操作符:

const { Observable, of } = require('rxjs');

let ob1$ = of(6,9,4);

function multiplyByTen(ob$){
    let res$ = new Observable((observer) => {
        ob$.subscribe({
            next(data){
                observer.next(data * 10);
            },
            error(err){
                observer.error(err);
            },
            complete(){
                observer.complete();
            }
        });
    });

    return res$;
}

let ob2$ = multiplyByTen(ob1$);
ob2$.subscribe((data) => {
    console.log(data);
});

console.log('End');

// 60
// 90
// 40
// End
复制代码

实例操作符

通常提到操作符时,我们指的是实例操作符(例如:filter,map。。。等),它是 Observable 实例上的方法。举例来说,如果上面的 multiplyByTen 是官方提供的实例操作符,它看起来大致是这个样子的:

Observable.prototype.multiplyByTen = function multiplyByTen() {
  var input = this;
  return new Observable(function subscribe(observer) {
    input.subscribe({
      next: (v) => observer.next(10 * v),
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    });
  });
}
复制代码

实例运算符是使用 this 关键字来指代输入的 Observable 的函数。

静态操作符

静态操作符是直接附加到Observable类上的操作符,静态操作符没有this ,它完全依赖于它的参数。

静态操作符是附加到 Observable 类上的纯函数,通常用来从头开始创建 Observable 。

这些都是旧版的Rxjs,新版(5.5之后)做了些调整。

变化

从Rxjs5.5开始就提供了“pipeable操作符”,可以通过rxjs/operators来访问。由于操作符要从 Observable 中独立出来(之前混在Observable实例里),所以操作符的名称不能和 JavaScript 的关键字冲突。因此一些操作符的 pipeable 版本的名称做出了修改。这些操作符是:

  1. do -> tap
  2. catch -> catchError
  3. switch -> switchAll
  4. finally -> finalize
  5. ...

pipe 是 Observable 的一部分,不需要导入,也就是说pipe是实例上的方法。

const { Observable, range, of, map, filter,scan } = require('rxjs');

const source$ = range(0, 10);

source$.pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x))

console.log('End');

// 0
// 4
// 12
// 24
// 40
// End
复制代码
import { map, filter, scan } from 'rxjs/operators';
复制代码

也可以创建自定义操作符,其实就是一个函数,接收一个Observable,返回一个新的Observable,可以参考“实例操作符”中的例子。

操作符有很多类型,比如创建型操作符,转换类操作符,过滤类操作符,组合类操作符,多播类操作符,还有错误处理类的操作符等,后面的文章会详细的介绍,但是并不会把每个操作符都介绍一遍,先掌握主要的操作符。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改