5.Observerble简单使用

五.Observerble 简单使用

这篇开始就是 RxJS 的应用篇.

应用共有,一个核心,三个重点:

• Observable, 加上 Opeartors(map,filter)

• Observer

• Subject

• Schedulers

Observer 最简单,在本篇介绍完/
Subject 使用频率低,但是要理解和RxJS相关的库,一定要会.3-5篇
Schedulers 用于解决RxJS衍生出的最后一道问题,后期补完.

看前几篇的时候就感觉那些概念都很熟悉了，看了这篇才知道…
原来 RxJS 和 Promise 的设计十分相近……
知道这一点就好理解多了, 毕竟 Promise 用的多, 也手写过..

创建 Observerble 实例

// observer相当于promise 的resolve和reject合并在一个对象里
var observable = Rx.Observable.create(function(observer) {
		observer.next('Jerry'); 
		observer.next('Anna');
	})
	
// 相当于promise.then(onResolve,onReject)
observable.subscribe(function(value) {
	console.log(value);
})

同步异步都能进行处理

参数 Observer 观察者

Observable 可以被 Observer 订阅.

注意这里的 Observer 仅是参数名,与 Observer Pattern(观察者模式)的 Observer 不是一个概念.

Observer 具有三个方法

• next: Observable 中可直接调用.
• complete: Observable 中可直接调用,调用后 后续next方法均无效.
• error: Observable 中发生错误时可调用.

var observable = Rx.Observable.create(function(observer) {
        observer.next('Jerry');
        observer.next('Anna');
        observer.complete();
        observer.next('not work');
	})
	
// 相当于promise中给then传的的参数 onResolve(成功回调) onReject(失败回调)
// 但是很显然这里不分成功回调与失败回调, 均调用next,且可无线调用next,直到complete
// 内部抛错得自己catch调用error
var observer = {
	next: function(value) { console.log(value); },
	error: function(error) { console.log(error) },
	complete: function() { console.log('complete') }
}
// subscribe 相当于promise 的 then
observable.subscribe(observer)

error参数的常见用法

var observable = Rx.Observable.create(function(observer) {
    try {
      observer.next('Jerry');
      observer.next('Anna');
      throw 'some exception';
    } catch(e) {
      observer.error(e)
    }
  });

Observer 可以只传next方法,也可不用Observer直接传函数

// 只有next属性的Observer
var observer = {
	next: function(value) {
		//...
	}
}
//---------------------------------
//直接传函数也是一样,不定义observer这个对象.
observable.subscribe(
    value => { console.log(value); },
    error => { console.log('Error: ', error); },
    () => { console.log('complete') }
)

addEventListener 与 Observable 的区别

在写法上,能很明显感觉两者的差异

addEventListener本质上是事件订阅,是观察者模式 的一个实例,
写起来感觉就像设定一个程序,特定条件执行,主观上会意识到这是一个异步操作.

Observable 则主观上更像,subscribe’声明’(其实不是)了一个函数,然后写next时’调用’了.
写起来感觉更像在写同步.

造成两者差异的本质是,
addEventListener 或者说 观察者模式的一个实例 是一个已经写好了 create 方法的 Observable.
而Observable 是一个还没定义 create 方法的 addEventListener.

addEventListener 相当于只开放了 subscribe,给用户接口,以定义某事件触发后,该进行什么操作.
(当然,用户还可以选择是click事件还是mousehover事件,相当于部分开放Observable.create –)
(– 其内部肯定做了多重判断)

而Observable,既开放了 subscribe 让用户定义事件触发回调, 又开放了 Observable.create,
让用户定义何时何种情况触发回调.

编写 Observable 时,
写 Observable.create() 中的代码自然会像同步(因为Observable内部已经处理了异步获取数据等操作),
写 describe() 中的函数是回调函数,自然会按异步去思考.

而其他方面的差异,则没对比的必要,因为一个是特定需求的API,一个是通用库,没对比性.
这里仅仅给自己记录下这个怪异点究竟由何而起.

总结

var observable = Rx.Observable.create(function(observer) {
        observer.next('Jerry');
        observer.next('Anna');
        observer.complete();
        observer.next('not work');
	})
var observer = {
	next: function(value) { console.log(value); },
	error: function(error) { console.log(error) },
	complete: function() { console.log('complete') }
}
observable.subscribe(observer)