- 什么是RxJS？
RxJS是ReactiveX编程理念的JavaScript版本。ReactiveX来自微软，它是一种针对异步数据流的编程。简单来说，它将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。
初级核心概念
- Observable
- Observer
- Operator
Observable被称为可观察序列，简单来说数据就在Observable中流动，你可以使用各种operator对流进行处理
// 通过类方法interval创建了一个Observable序列
const ob = Observable.interval(1000)
// 使用操作符对流进行处理，take(3)表示只取源发射的前3个数据
// map表示将流中的数据进行映射处理 filter表示过滤掉出符合条件的数据
// ob作为Observable序列必须被“订阅”才能够触发上述过程，也就subscribe
ob.take(3).map(n => n * 2).filter(n => n > 2).subscribe(n => console.log(n));
// subscribe 中完整的方法 error和complete只会执行一个 next会执行多次
ob.subscribe({
next: d => console.log(d),
error: err => console.error(err),
complete: () => console.log('end of the stream')
})
创建可以观测的流
Observable.of(...args) 可以将普通JavaScript数据转为可观察序列
Observable.fromPromise(promise) 将Promise转化为Observable
Observable.fromEvent(elment, eventName) 从dom事件创建序列
Observable.ajax(url | AjaxRequest) 发送http请求，
Observable.create(subscribe) 这个属于万能的创建方法，一般用于只提供了回调函数的某些功能或者库
// 不使用rxjs
var text = document.querySelector('#text'),
timer = null,
currentSearch = '';
text.addEventListener('keyup', (e) =>{
clearTimeout(timer)
timer = setTimeout(() => {
// 声明一个当前所搜的状态变量
currentSearch ＝ '书';
var searchText = e.target.value;
$.ajax({
url: `/search/${searchText}`,
success: data => {
// 判断后台返回的标志与我们存的当前搜索变量是否一致
if (data.search === currentSearch) {
// 渲染展示
render(data);
} else {
// ..
}
}
});
},250)
})
// 使用rxjs
var text = document.querySelector('#text');
var inputStream = Rx.Observable.fromEvent(text, 'keyup') //为dom元素绑定'keyup'事件
.debounceTime(250) // 防抖动
.pluck('target', 'value') // 取值
.switchMap(url => Http.get(url)) // 将当前输入流替换为http请求
.subscribe(data => render(data)); // 接收数据
常用操作符：
- 类操作符（通常为合并序列或从已有数据创建序列）
合并
forkJoin 使用方式：Rx.Observable.forkJoin(...args [resultSelector])
可以接受多个observable作为参数，然后并行执行所有的observable，但是最终的结果是每个observable的最后一个输出值。
var source = Rx.Observable.forkJoin(
Rx.Observable.of(1, 2, 3),
Rx.Observable.range(0, 10),
);
var subscription = source.subscribe(
x => console.log(`onNext: ${x}`),
e => console.log(`onError: ${e}`),
() => console.log('onCompleted'));
// 输出 onNext: 3,9
// 输出 onCompleted
Rx.Observable.of(1, 2, 3)是将参数中指定的值输出；
Rx.Observable.range(0, 10)是输出指定范围的整数，0表示起点，10表示整数列的长度。
merge, concat
创建
创建 of, from, fromPromise, fromEvent, ajax, throw
实例操作符（对流中的数据进行处理或者控制流程）
map, filter,switchMap, toPromise, catch, take, takeUntil, timeout, debounceTime, distinctUntilChanged, pluck。
具体的使用见
RxJS Marbles
rxjs中文文档