七.Operators 操作函数
前面讲完了用于创建Observable实例的 operator 内置操作函数,
接下来要讲关于转换(Transformation),过滤(Filter),合并(Combination)的 操作函数.
Operator 是什么样的
Operators 就是 Observable 内置的操作函数 ,例如像是 map, filter, contactAll…
重点是,这些函数内部都会创建一个新 Observable 对象并返回,以实现链式调用.
其实和promise 的思想几乎一样,把 视为Observable,subscribe是为then 一切都好理解了
例如下面这样的 简单写一个map方法
function map(callback) {
return Rx.Observable.create((observer) => {
return this.subscribe(
(value) => {
try{
observer.next(callback(value));
} catch(e) {
observer.error(e);
}
},
(err) => { observer.error(err); },
() => { observer.complete() }
)
})
}
Rx.Observable.prototype.map = map;
var people = Rx.Observable.of('Jerry', 'Anna');
var helloPeople = people.map((item) => item + ' Hello~');
helloPeople.subscribe(console.log);
// Jerry Hello~
// Anna Hello~
这里调用了 people 的map 方式, 其实内部 就是使用Rx.Observable.create
创建了一个新的 Observable2 ,
并传入了一个函数 (observer) => {...}
, 该函数会在 Rx.Observable.create
内立即执行.
该函数 立即执行 并 return 了 this.subscribe
,其实就是 people.subscribe
,
people.subscribe
被调用, Rx.Observable.of('Jerry', 'Anna')
执行 ,调用两次next,
也就是(value) => {...}
,每次 (value) => {...}
内部都调用了 Observable2 的next 方法,
并传入了 callback 也就是 (item) => item + ' Hello~')
,该状态被 Observable2 记录,
然后Observable2 被 return 赋值给了 helloPeople,并调用了 subscribe 方法,
helloPeople.subscribe
执行时,根据 helloPeople 记录的状态, 调用 subscribe 中传入的 方法,
也就是调用了两次next ,在 helloPeople 中 代表的就是 console.log
,
调用 console.log
,并传入 observer.next(callback(value))
时记录的 callback(value)
,
Marble diagrams 描绘observable行为的图
用 -
来代表一小段时间, 用 一连串-
来代表一个Observable
-----------
用 X
来代表 Observable 执行发生错误
-----------X
用 |
来代表 Observable 执行结束
-----------|
用 数字或相近的符号 代表 Observable 向下传递的值
// var source = Rx.Observable.interval(1000);
----0----1----2----3--....
用 ()
代表内部发生的是同步操作
// var source = Rx.Observable.of(1,2,3,4);
(1234)|
特殊: 表达 使用 operator 产生的 前后转换
上面是observable,中间是operator,下面是新的observable
var source = Rx.Observable.interval(1000);
var newest = source.map(x => x + 1);
source: -----0-----1-----2-----3--...
map(x => x + 1)
newest: -----1-----2-----3-----4--...
Operator 简单举例
map
.map(callback)
会把next调用传递过来的数值数组,进行 callback 再处理一遍
var source = Rx.Observable.interval(1000);
var newest = source.map(x => x + 2);
newest.subscribe(console.log);
// 2
// 3
// 4
// 5..
Marble diagrams 表示:
source: -----0-----1-----2-----3--...
map(x => x + 1)
newest: -----1-----2-----3-----4--...
mapTo
.map(x)
直接把next调用传递过来的值数组 重置 为 x.
var source = Rx.Observable.interval(1000);
var newest = source.mapTo(2);
newest.subscribe(console.log);
// 2
// 2
// 2
// 2..
Marble diagrams 表示:
source: -----0-----1-----2-----3--...
map(x => x + 1)
newest: -----2-----2-----2-----2--...
filter
.filter(callback)
直接把next调用传递过来的值数组,根据传入callback执行返回值 是否为true过滤一遍.
var source = Rx.Observable.interval(1000);
var newest = source.filter(x => x % 2 === 0);
newest.subscribe(console.log);
// 0
// 2
// 4
// 6..
Marble diagrams 表示:
source: -----0-----1-----2-----3-----4-...
filter(x => x % 2 === 0)
newest: -----0-----------2-----------4-...
总结
Operators 就是 Observable 内置的 操作函数,每个这种函数都会返回一个新的 Observable
Marble diagrams 各种符号的含义
认识 Observable 的 几个简单 Operators, map mapTo filter .