RXJS

最近用angular开发项目，用到了到了rxjs。刚开始看的时候非常吃力，为什么这么写代码？这段代码什么意思？既然有了疑问那就有学习的目标了。

定义：

先看看官网给你的几个概念

RXJS 基本概念

• Observable (可观察对象): 表示一个概念，这个概念是一个可调用的未来值或事件的集合。
• Observer (观察者): 一个回调函数的集合，它知道如何去监听由 Observable 提供的值。
• Subscription (订阅): 表示 Observable 的执行，主要用于取消 Observable 的执行。
• Operators (操作符): 采用函数式编程风格的纯函数 (pure function)，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
• Subject (主体): 相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。
• Schedulers (调度器): 用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

Observable Observer Subscription

Observables 是使用 Rx.Observable.create 或创建操作符创建的，并使用观察者来订阅它，然后执行它并发送 next / error / complete 通知给观察者，而且执行可能会被清理。
观察者是由 Observable 发送的值的消费者。
观察者只是有三个回调函数的对象，每个回调函数对应一种 Observable 发送的通知类型。
每个回调函数对应一种 Observable 发送的通知类型：next、error 和 complete
当我们调用Observable的subscribe()函数时，一个Observer就被创建出来
当订阅 Observable 时，你可能只提供了一个回调函数作为参数，而并没有将其附加到观察者对象上，例如这样：
observable.subscribe(x => console.log('Observer got a next value: ' + x));
在 observable.subscribe 内部，它回创建一个观察者对象并使用第一个回调函数参数作为 next 的处理方法。所有三种类型的回调函数都可以直接作为参数来提供：

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

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('在订阅前');
observable.subscribe({
    next: x => console.log('得到的值 ' + x),
    error: err => console.error('错误: ' + err),
    complete: () => console.log('执行完毕'),
});
console.log('在订阅之后');
/*
结果：
在订阅前
得到的值 1
得到的值 2
得到的值 3
在订阅之后
得到的值 4
执行完毕
*/

create()函数接收一个函数作为参数，这个参数函数实际就是observable这个对象的subscribe函数，
我们看到使用的时候传给subscribe函数的并不是一个observer，
而是一个函数，在RxJS内部，subscribe函数的重载会自动为我们创建observer，并把console.log这个函数赋值给了next函数，
也就是说，observer.next(1)这个操作实际就是调用的console.log(1)，即在控制台打印数字1。这里值得注意的地方就是，
如果一个observable包装的数据源是有限个数的，那么你可以调用complete()函数表明所有数据(事件)都发送完毕了。
Rx.Observable是Observable
Rx.Observable.create创建序列源source，创建source的方法有多个，比如of, from, fromPromise等
observer是Observer观察者，只有在Rx.Observable.create创建方法可以获取，其他创建方法内置了observer且不可访问
observer.next发射数据更新
subscription.next立即响应（不同于发射）静态数据，此时不会经过Operators处理
! Rx.Observable.create或者Rx.Subject.create创建的source不会自动关闭，其他方式则当检测到没有序列发生变更会自动销毁source.

Schedulers

var 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(() => {
    // subscription 和 childSubscription 都会取消订阅
    subscription.unsubscribe();
}, 1000);

// 1秒后程序停止运行

Operators

// 1、
const source = Rx.Observable.of(1,2,3,4,5);
// 使用 do 透明地打印 source 中的值
const example = source
    .do(val => console.log(`MAP 之前: ${val}`))
    .map(val => val + 10)
    .do(val => console.log(`MAP 之后: ${val}`));
// 'do' 并不转换值
// 输出: 11...12...13...14...15
const subscribe = example.subscribe(val => console.log(val));

image.png

// 2、
const one = new Promise((resolve, reject) => {
    setTimeout(() => {

        resolve(1);
    }, 3000);//模拟3秒延迟
});
// // 这个时候Promise中的代码已经在运行了
//
//
one.then(function (data) {
    console.log(data)
})


Rx.Observable.fromPromise(one)
    .map(value => value = value + 1)
    .subscribe(result => {
        console.log(result);
    });

console.log("程序结束");


// 3、
Rx.Observable.from([1, 2, 3, 4, 5, 6, 7, 8])
    .scan((a, b) => a + b, 0)
    .subscribe((x) => console.log(x));

image.png