丁鹿学堂：前端异步进阶之Rxjs的使用

响应式编程

Rx， 全称Reactivbe Extension，指的是实践响应式编程的一套工具。
Rx其实是一个大家庭，针对不同的语言都有适配。最早是微软的c#，我们前端关注的是js余元，就是RxJS
RxJS 的特点：

1. 数据流抽象了很多现实问题
2. 非常擅长处理异步操作
3. 把复杂问题分解成简单问题的组合。

Rxjs的安装

可以通过npm安装，也可以通过url引入的方式使用，根据自己的项目结构灵活去使用

npm i rxjs
1

引入

import {Observable} from 'rxjs'
1

Observable

Observable就是可被观察者。Rxjs中的数据流就是Observable对象，Observable实现了观察者模式和迭代器模式这两种设计模式。
观察者模式我们在之前的文章中介绍过了，原理是一样的。

迭代器模式

迭代器指的是能够遍历一个数据集合的对象。这个数据集合是一个统称，在代码中可以表现为数组，也可以是一个树形结构，也可以是一个单向的链表。迭代器的作用就是提供一个通用的接口，让使用者不用去关心这个数据集合的具体实现方式。
迭代器一般都有这些特点：
getCurrent，获取当前被指针所指向的元素
next 将指针移动到下一个元素，调用这个函数后，getCurrent获得的元素也会发生相应的变化。
isDone，判断是否已经遍历完所有的元素。

import {ObserVable} from 'rxjs'
const source = new ObserVable(subscriber => {
  subscriber.next(1)
  subscriber.next(2)
  subscriber.next(3)
})
source.subscribe({
  next(value){
    console.log(value)
  }
})
1
2
3
4
5
6
7
8
9
10
11

RxJS的使用场景

简单跟常规的异步操作的情况下，我们使用promise或者async 和await就足够了，而且相对来说更普及，大家更熟悉，利于代码的维护。
如果有大量的异步数据的更新，而且这些的异步更新之间还有相互依赖的关系的情况下，我们可以使用RxJS结合promise。