angular RxJs

说明

Rxjs是深度集成在angular中的，我们随时可以去使用它，所以想用好angular，那么必须学好RxJs

概念理解

1 Observable 可观察对象
相当于Promise对象，内部可以用于执行异步代码，通过调用内部提供的方法将异步代码执行的结果传递到可观察对象外部。
2 Observer 类比then
方法中的回调函数，用于接收可观察对象中传递出来的数据
3 subscribe 订阅
类比then方法，通过订阅将可观察对象和观察者连接起来，当可观察对象发送数据时，订阅者可以接收到数据

观察者模式

这里补充讲解一下观察者模式，怕有的人不了解或遗忘了。
观察者模式（observer），又叫发布-订阅模式（publish/subscribe）。这里说下，发布-订阅模式其实有的说他是一种消息范式。并不是一种设计模式。在维基百科中也是有说明的，不过在后来的vue和react中都有使用，可能大家也就默认了吧。但是影响不大。个人举个例子说明一下：
你去超市买烟，但是呢，烟没货了，你就跟老板说：“老板，等烟到货了，记得通知我”。然后烟到货后，老板通知你，你就来买了。在代码中，也是这样，你不知道某个事件何时触发，只能在其触发时去执行相应的逻辑。所以这里面，老板那里是个observable，可观察的对象，而你呢，就是一个observer，观察者。你们这件这种通知的关系，就是一种订阅的关系。
Rxjs中的实现

    //定义烟店的老板
    const smoke_boss = new Observable(todo => {
      //等烟到货了，通知买家
      setTimeout(() => {
          todo.next("烟到货了")
      }, 1000);

    })
    //定义买家1
    const buy_one = {
      next: function (data:any) {
        console.log(data)
      }
    }
    //建立关系。也就是订阅
    smoke_boss.subscribe(buy_one)

到此，应该能理解其怎么使用了，当然，它里面还有很多方法，这里就不一一列举了，感兴趣的同学呢，可以去官网上查看学习使用
https://cn.rx.js.org/class/es6/MiscJSDoc.js~ObserverDoc.html
基本上这里理解之后，下面就是一些常用的api的理解了

可观察对象

subject

使用场景
在angular中进行一些共享的操作，在被订阅后，是不会立即执行的

const subJect = new Subject();

    subJect.subscribe({
      next: function (data) {
        console.log(data)
      }
    })

    setTimeout(() => {
      subJect.next("nihao")
    }, 2000);

BehaviorSubject

使用场景
在angular中进行一些共享的操作，在被订阅后，是会立即执行的

const subJect = new BehaviorSubject("我的默认值");

    subJect.subscribe({
      next: function (data) {
        console.log(data)
      }
    })

    setTimeout(() => {
      subJect.next("nihao")
    }, 2000);

ReplaySubject

使用场景
在angular中进行一些共享的操作，在被订阅后，可以拿到历史数据

操作符及辅助方法

1 数据流：从可观察者对象内部输出的数据就是数据流
2 操作符：用于操作数据流，可以对数据进行转换、过滤操作的

range(辅助方法)

range(start,length),订阅后发出指定范围的数据

map(操作符)

操作符放在pipe管道里进行操作

from（辅助方法）

将数组、promise、lterator转换为observable对象

forkJoin（辅助方法）

处理多个请求，并在最后请求完毕后返回所有的请求数据；就是说同时请求几个ajax，因为是异步请求，肯定有快有慢，直到最后一个请求发送完毕后才返回数据

其实跟promise的all差不多。

fromEvent

把元素的事件转换为可观察对象

throttleTime(节流)、debounceTime

用于节流(在单位时间内，对动作只响应一次)，防抖(只触发最后一次时间在规定时间内。)；两个主要的指标、高频率事件和时间。比如按钮点击事件，在3s内被触发了10000次，防抖就是说，如果3s内连续触发，我只执行最后一次的触发事件；防抖嘛，就是防止你手抽搐点多了。然后节流，就像水管子，粗的水管子，单位时间流的水就多，那就搞细点，还是上面的例子，让其3s内只触发2次或者更少。代码上体现，防抖就是搞定定时器，3s内触发事件就清除定时器重新计时。节流就是在规定时间内去触发一次，不管真实是触发了多少次，就不不停的去重置time

fromEvent(button,'click').pipe(throttleTime(2000)).subscribe(data=>{console.log(data)})