rxjs 笔记(一)

RxJS

第一个例子

普通的注册事件监听器

var button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));

利用RxJs创建一个可观察对象

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

纯度

RxJS 提高代码纯度,隔绝代码状态

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

scan操作符:得到回调函数每个的值,对他进行操作,传递给下一次回调函数做返回值.

流量控制

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

Other flow control operators are filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged etc.

修改value

map:

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .throttleTime(1000)
  .map(event => event.clientX)
  .scan((count, clientX) => count + clientX, 0)
  .subscribe(count => console.log(count));

Other value producing operators are pluck, pairwise, sample etc.

可观察对象

可观察对象是懒惰推送多个值的集合

var observable = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next: x => console.log('got value ' + x),
  error: err => console.error('something wrong occurred: ' + err),
  complete: () => console.log('done'),
});
console.log('just after subscribe');

结果输出

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

observable对象被订阅是直接全部执行,输出1,2,3.4在1秒后执行.
error:在订阅出错时执行
complete:订阅结束时执行

Pull versus Push

生产者	消费者
拉取	被动:在被请求是生成数据
推送	主动:按自己的步伐产生数据

例子

|单个|    多个

——-|——-|——
拉取 |Function|Iterator
推送 |Promise|Observable

pull:消费者确定什么时候从数据生成者获得数据,但生成者不知道什么时候推送数据
push:生成确定什么时候生成发生数据,但消费者不知道什么时候获得数据

Observables:新的pull

Observables as generalizations of functions

Observables,创建一个方法

var foo = Rx.Observable.create(function (observer) {
  console.log('Hello');
  observer.next(42);
});

实现的功能相当于

function foo() {
  console.log('Hello');
  return 42;
}

Observables创建的方法和function一样,是不会自动执行的.只有在调用时才执行.和function不一样的是function只能返回一个值,而Observables可以返回多个值.
observer.next(42) 为observer返回的值,可以返回多个值.subscribe的函数会对每次next返回都执行一遍无论同步还是异步返回.

Observables相关操作

新建

Rx.Observable.create是Observable的构造函数的别名,他有一个参数subscribe函数.

var observable = Rx.Observable.create(function subscribe(observer) {
  var id = setInterval(() => {
    observer.next('hi')
  }, 1000);
});

订阅

observable.subscribe(x => console.log(x));

这里的subscribe其实等价于新建observable时的subscribe

执行

3中执行的方式:
1.Next:包含一个值,是最重要的,返回observable实际上的值
2.Error:返回一个javaquery的错误,只会执行一侧
3.Complete:无返回值,只会在调用结束时执行一次
一旦Error或Complete被执行,再次之后的语句将不再执行
建议在subscribe中使用try/catch

ar observable = Rx.Observable.create(function subscribe(observer) {
  try {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.complete();
  } catch (err) {
    observer.error(err); // delivers an error if it caught one
  }
});

处理observable的执行

结束observable的执行

var observable = Rx.Observable.from([10, 20, 30]);
var subscription = observable.subscribe(x => console.log(x));
// Later:
subscription.unsubscribe();

Observer 观察员

Observer是Observable所提供价的消费者。Observer只是一组回调，用于Observable传递的每种类型的通知：next,error和complete。

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};
``
使用

observable.subscribe(observer);

即可以单数的定义observable.subscribe的回调函数
也可以直接按参数返回位置,定义相关函数

observable.subscribe(
x => console.log(‘Observer got a next value: ’ + x),
err => console.error(‘Observer got an error: ’ + err),
() => console.log(‘Observer got a complete notification’)
);

## 订阅者 Subscription
Subscription是一种一次性的资源,通常用来执行一个Observable.他有一个重要的方法unsubscribe,不用穿任何参数,只是用来处理subscribe所持有的资源.一个subscribe只有一个unsubscribe用来是否subscribe占用的资源,停止subscribe的执行
subscribe可以被放在一起(利用add,可以用remove移除),然后共享同一个unsubscribe

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

var subscription = observable1.subscribe(x => console.log(‘first: ’ + x));
var childSubscription = observable2.subscribe(x => console.log(‘second: ’ + x));

subscription.add(childSubscription);

setTimeout(() => {
// Unsubscribes BOTH subscription and childSubscription
subscription.unsubscribe();
}, 1000);

##Subject
Subject相当于一个Observer的集合,可以对他设置多个subscribe,在执行时会全部执行

var subject = new Rx.Subject();

subject.subscribe({
next: (v) => console.log(‘observerA: ’ + v)
});
subject.subscribe({
next: (v) => console.log(‘observerB: ’ + v)
});

var observable = Rx.Observable.from([1, 2, 3]);

observable.subscribe(subject);

##Reference counting


##BehaviorSubject
是Subject的一个变形,接受当前的值subscribe时,直接执行一次

var subject = new Rx.BehaviorSubject(0); // 0 is the initial value

subject.subscribe({
next: (v) => console.log(‘observerA: ’ + v)
});

subject.next(1);
“`

ReplaySubject

在新一次的subscribe时,会把老值设计按输入要执行的次数的执行都再执行一次

AsyncSubject

只对最后的值执行一次,在subject.complete();时执行