Rxjs笔记

1. RxJs是什么？

可以看一下官网介绍 Rx官网

Rx是一个API，通过可观察的流用于异步编程，使得异步编程可以控制

2. Rxjs核心概念

在RxJS中管理异步事件的基本概念如下：

Observable：代表了一个调用未来值或事件的集合的概念
Observer：代表了一个知道如何监听Observable传递过来的值的回调集合
Subscription：代表了一个可执行的Observable，主要是用于取消执行
Operators：是一个纯函数，允许处理集合与函数式编程风格的操作，比如map、filter、concat、flatMap等
Subject：相当于一个EventEmitter，它的唯一的方法是广播一个值或事件给多个Observer
Schedulers：是一个集中式调度程序来控制并发性，允许我们在setTimeout或者requestAnimationFrame上进行协调计算

3. Rxjs中的Observable

点击打开链接

和 普通函数 对比 学习Observable

普通函数：

  // 定义一个函数
  fun() {
    console.log('process...');
  }
  // 调用这个函数
  fun();

Observable

    // 创建一个Observable函数（一个流），带有返回值
    const test$ = Observable.create((subscriber) => {
      console.log('process...');
      subscriber.next('1234');
    });

    // 执行Observable函数，然后控制台输出返回值
    test$.subscribe((value) => {
      console.log(value);
    });

输出：

process...

1234

    // 创建一个Observable函数（一个流），带有返回值
    const test$ = Observable.create((subscriber) => {
      console.log('process...');
      subscriber.next('1234');
      setTimeout(() => {
        subscriber.next('5678');
      }, 1000);
    });

    // 执行Observable函数，然后控制台输出返回值
    test$.subscribe((value) => {
      console.log(value);
    });

输出：

process...

1234

5678

说明：

一次订阅，输出所有值，输出多个值

Observable可以选择异步输出值

处理异常：

普通函数：

test02() {

console. log( 'process...');

throw new Error( 'bug!');

}

try {

this. test02();

}catch (e) {

console. log(' error' + e);

}

observable函数：

test() {

// 创建一个Observable函数（一个流），带有返回值

const test$ = Observable. create(( subscriber) => {

console. log( 'process...');

subscriber. next( '1234');

subscriber. error( new Error( 'bug!'));

});

// 执行Observable函数，然后控制台输出返回值

test$. subscribe(

value => { console. log(value); },

e => console. log(e)

);

}

RxJS使用流程：

1. 创建观察者：（送报纸的）

let foo = Observable.create((observer) => {

    console.log('一些列操作');

    observer.next('2. 相当于return出去的值');

    observer.next('3. 可以return出去多个值');

    observer.error(new Error('4. 异常处理，bug!'));

})

5. 订阅observable，返回订阅对象（报纸的读者、订阅者）

let subscription = foo.subscribe(

 value => console.log(value),

 error => console.log('error' + e) 

)

还有一种形式

let subscription = foo.subscribe({
  next(value) { console.log(value) },
  error(e) { console.log('error: ' + e) }

})

中止执行：(这是必须的，避免出现内存泄漏等bug)

var subscription = foo.subscribe(i => console.log(i));

subscription.unsubscribe();

Observable执行结束后，会触发观察者的complete回调

foo.subscribe({
  next(value) { console.log(value) },
  complete() { console.log('completed') }

})

Observable的观察者共有三种回调

next：获得数据

error：处理异常

complete：执行结束

next可以被调用多次，error和complete每个最多被调用一次，并且其中一个被调用了，不再触发其他回调

数据转换

对于函数的返回值，有时我们需要处理一下再使用，Observable先map再subscribe

var foo = Rx.Observable.create((observer) => {
  let i = 0
  setInterval(() => observer.next(i++), 1000)
})
 
foo.map(i => i * 2).subscribe(i => console.log(i))
// 输出：
// 0
// 2
// 4

// ...

除了 map() 方法，Observable 还提供了多种转换方法，如 filter() 用于过滤数据，find() 值返回第一个满足条件的数据，reduce() 对数据进行累积处理，在执行结束后返回最终的数据。这些方法和数组方法功能是类似的，只不过是对异步返回的数据进行处理。还有一些转换方法更加强大，例如可以 debounceTime() 可以在时间维度上对数据进行拦截等等。

Observable 的转换方法，本质不过是创建了一个新的 Observable，新的 Observable 基于一定的逻辑对原 Observable 的返回值进行转换处理，然后再推送给观察者。

Observable是一个特殊的函数，每次调用都会重新执行逻辑，执行有返回数据等；

数据推送的方式返回给回调方法，返回值可以是异步的，可以返回多个值等

将Observable视为特殊的函数，在理解上是有所帮助的。

Observable也被视为data stream 数据流，这是从Observable可以返回多个值的角度上来看的，

而数据转换则是基于当前数据流创建新的数据流：Observable.map(x => 10*x)

从图上看到的只是数据，而将Observable看做是函数时，会注意到起内部逻辑，也能理解数据时怎么产生的