rxjs 是一个响应式编程的库。用于编写异步操作或基于回调的代码更容易。
核心有三点:
1.observer. 观察者,观察obervable中丢出来的数据
2.subject 主题,把可观察对象整合到一起,把观察的数据共享
3.schedulers 调度器
流程:create 一个observable。通过subscribe订阅监听异步操作的变化。
关键字:
subscribe 监听异步操作。
finalize 当异步操作stop 的时候被调用的。
unsubscrible 取消监听 (取消后要清理定时器)
可观察对象observable
首先我们需要创建一些可观察对象observables
// 来自一个或多个值
Rx.Observable.of(‘foo’, ‘bar’);
// 来自数组
Rx.Observable.from([1,2,3]);
// 来自事件
Rx.Observable.fromEvent(document.querySelector(‘button’), ‘click’);
// 来自 Promise
Rx.Observable.fromPromise(fetch(’/users’));
// 来自回调函数(最后一个参数得是回调函数,比如下面的 cb)
// fs.exists = (path, cb(exists))
var exists = Rx.Observable.bindCallback(fs.exists);
exists(‘file.txt’).subscribe(exists => console.log(‘Does file exist?’, exists));
// 来自回调函数(最后一个参数得是回调函数,比如下面的 cb)
// fs.rename = (pathA, pathB, cb(err, result))
var rename = Rx.Observable.bindNodeCallback(fs.rename);
rename(‘file.txt’, ‘else.txt’).subscribe(() => console.log(‘Renamed!’));
在这里我们就可以看到当我们想观察的时候,根据我们观察的对象不同也有不同的观察方法。
当我们创建一个可观察的对象的时候,分两种形式:
如果是外部产生的事件 var myObservable = new Rx.Subject();
如果是内部的事件var myObservable = Rx.Observable.create
拿例子介绍一下需要的部分关键字
// 输入 "hello world"
var input = Rx.Observable.fromEvent(document.querySelector('input'), 'input');
// 过滤掉小于3个字符长度的目标值
input.filter(event => event.target.value.length > 2)
.map(event => event.target.value)
.subscribe(value => console.log(value)); // "hel"
// 延迟事件
input.delay(200)
.map(event => event.target.value)
.subscribe(value => console.log(value)); // "h" -200ms-> "e" -200ms-> "l" ...
// 每200ms只能通过一个事件
input.throttleTime(200)
.map(event => event.target.value)
.subscribe(value => console.log(value)); // "h" -200ms-> "w"
// 停止输入后200ms方能通过最新的那个事件
input.debounceTime(200)
.map(event => event.target.value)
.subscribe(value => console.log(value)); // "o" -200ms-> "d"
// 在3次事件后停止事件流
input.take(3)
.map(event => event.target.value)
.subscribe(value => console.log(value)); // "hel"
// 直到其他 observable 触发事件才停止事件流
var stopStream = Rx.Observable.fromEvent(document.querySelector('button'), 'click');
input.takeUntil(stopStream)
.map(event => event.target.value)
.subscribe(value => console.log(value)); // "hello" (点击才能看到)
这是因为函数和 Observables 都是惰性运算。如果你不调用函数,console.log(‘Hello’) 就不会执行。Observables 也是如此,如果你不“调用”它(使用 subscribe),console.log(‘Hello’) 也不会执行。
订阅 Observables
它是惰性运算,只有在每个观察者订阅后才会执行。随着时间的推移,执行会以同步或异步的方式产生多个值。
Observable 执行可以传递三种类型的值:
“Next” 通知: 发送一个值,比如数字、字符串、对象,等等。 “Error” 通知: 发送一个 JavaScript 错误 或 异常。
“Complete” 通知: 不再发送任何值。
//Observable 严格遵守自身的规约,所以下面的代码不会发送 "Next" 通知 4:
var observable = Rx.Observable.create(function subscribe(observer) {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
observer.next(4); // 因为违反规约,所以不会发送
});
//在 subscribe 中用 try/catch 代码块来包裹任意代码是个不错的主意,如果捕获到异常的话,会发送 "Error" 通知:
var observable = Rx.Observable.create(function subscribe(observer) {
try {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
} catch (err) {
observer.error(err); // 如果捕获到异常会发送一个错误
}
});
当你订阅了 Observable,你会得到一个 Subscription ,它表示进行中的执行。只要调用 unsubscribe() 方法就可以取消执行。
操作符Operator
就是把我观察的数据进行一些处理
主体subject
把很多个可观察对象进行整合,类似于数据共享。
调度器 schedulers