Skip to content

RxJS-Operators(操作符) #3

Open
@isNeilLin

Description

@isNeilLin

RxJS-Operators(操作符)

操作符是Observable类型上的方法,比如.map(),.filter(),.merge()。当操作符被调用时,它们不会改变已经存在Observable示例,而是返回一个新的Observable。它的subscription逻辑基于第一个Observable。

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

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

示例

function multiByTen(input){
	var output = Rx.Observable.create(function subscribe(observer){
		input.subscribe({
			next: v => {
				observer.next(10*v)
			},
			error: err => {
				observer.error(err)
			},
			complete: () => {
				observer.complete()
			}
		})
	})
	return output;
}

var observable = Rx.Observable.from([1,2,3,4])
var output = multiByTen(observable);
output.subscribe(x=>{
	console.log(x) // 10,20,30,40
})

订阅output会导致input Observable 也被订阅。被称之为“操作符订阅链”。

实例操作符 VS 静态操作符

通常提到操作符时,我们指的是实例操作符,它是Observable实例上的方法。

将multiplyByTen改造为实例操作符:

Rx.Observable.prototype.multiByTen = function(){
	var input = this;
	var output = Rx.Observable.create(function subscribe(observer){
		input.subscribe({
			next: v => {
				observer.next(10*v)
			},
			error: err => {
				observer.error(err)
			},
			complete: () => {
				observer.complete()
			}
		})
	})
	return output;
}

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

使用实例操作符

var observable = Rx.Observable.from([1,2,3,4]).Rx.Observable.prototype.multiByTen();
observable.subscribe(x=>{
	console.log(x) // 10, 20, 30, 40
})

除了实例操作符,还有静态操作符,它们是直接附加到 Observable 类上的。静态操作符在内部不使用 this 关键字,而是完全依赖于它的参数

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

最常用的静态操作符类型是所谓的创建操作符。它们只接收非Observable参数,比如数字,然后创建一个新的 Observable ,而不是将一个输入 Observable 转换为输出 Observable。
此外,还有一些组合操作符也可能是静态的,比如merge,combineLatest,concat等。这些作为静态运算符是有道理的,因为它们将多个 Observables 作为输入,而不仅仅是一个。

示例

var observable1 = Rx.Observable.interval(1000);
var observable2 = Rx.Observable.interval(400);

var merged = Rx.Observable.merge(observable1, observable2);

操作符分类

创建操作符

转换操作符

过滤操作符

组合操作符

错误处理操作符

工具操作符

条件操作符

数学操作符

Metadata

Metadata

Assignees

No one assigned

    Labels

    框架&工具库Vue和React等前端框架或工具库相关

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions