rxjs tutorial

iron -

RxJS 基本介紹

  • 官方对ReactiveX的定义

ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences.
It extends the observer pattern to support sequences of data and/or events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety, concurrent data structures, and non-blocking I/O.

简单来说，Rxjs就是一个处理异步行为更加优雅的库，它主要提供了一堆操作符(Operators)处理Observable对象，包括创建(creation)，转换(transformation)，组合(combination)和过滤(filtering)

prerequisites

  • 了解基本的函数编程概念
  • 了解基本的观察者模式（发布/订阅模式）,迭代器模式
  • 掌握ES6+的相关知识点，包括数组(map,of,from,reduce,reduceRight...)，对象的操作

常用的创建操作符

  • 使用import { /** 操作符 **/} from 'rxjs
  • 常用创建Observable静态实例的方法(前4个使用频率较高)
    1. Observable.create(callback)
    2. of 单个或多个对象转换成observable
    3. from 将可迭代对象（Set...），array,arrayLike,promise等中每个值转换成observable，和of类似，函数参数不同
    4. fromEvent 将事件转换成 observable，第一个参数是dom对象，第二个参数是事件名
    5. fromEventPattern 处理自定义事件，类似addEventListener
    6. interval 类似setTimeout，第一个参数必须是数值
    7. timer 类似interval，可以指定第二个参数
    8. range 顺序获取范围内的数值，差值为1
    9. throwError 创建一个observable，抛出错误时会执行
    10. EMPTY 创建空的observable,即订阅时立即完成（empty官方已经不推荐使用）
    11. Never 创建一个的observable，订阅时什么也不做（never官方已经不推荐使用）
    12. merge 连接多个observable,订阅时同时处理给定的输入
    13. concat 连接多个observable，订阅时按顺序处理给定的输入
    14. race 只处理多个输入observable中，最快执行的那个,有点类似promise.race
    15. combineLatest 连接多个observable，直到每个observable有值，才会输出最终值，而且其回调的执行依赖每个observable的最新元素
    16. zip 将多个observable合并成一个observable,输出是每个observable相同索引的值，而且其回调的执行依赖每个observable的相同索引的元素
  • Code Example

常用的转换操作符(transformation)

  • 使用import { /** 操作符 **/} from 'rxjs/operators
  1. map 类似es6 map方法，对observable的每一个值进行处理
  2. mapTo observable每次订阅（执行）时，每次输出给定（固定）的值
  3. switchMap 只处理最新的Observable
  4. mergeMap map+mergeAll
  5. concatMapmap+concatAll
  6. scan
  7. reduce 类型es6 reduce

常用的组合操作符(combination)

  1. mergeAll 和merge类似，将多个observable一起执行mergeAll(2)
  2. concatAll 和concat类似，合并多个observable成一个，然后按顺序一个一个执行concatAll()
  3. combineAll 和combineLatest类似
  4. startWith 传递开始输出的元素startWith("first", "second")

常用的过滤操作符(filtering)

  1. filter 类似es6 filter方法，对observable的每一个值进行处理，并返回一个新的observable
  2. find 类似es6 find方法找到observable中第一个符合条件的值find(v=>v%2===0)
  3. first 取第一个值或者找到observable中第一个符合条件的值first(v=>v%2===0)
  4. last 取最后一个个值或者找到observable中最后一个符合条件的值last(v=>v%2===0)
  5. single 取第一个符合条件的数字single(v=>v===1)
  6. take 取前几个元素take(3)
  7. takeLast 取最后几个元素takeLast(3)
  8. takeUtil 直到传入的observable完成时触发takeUtil(click)
  9. skip 忽略前几个元素skip(3)
  10. throttle 节流
  11. debounce 防抖

常用工具操作符

  1. tap 对Observable中的每个值进行操作，无返回值
  2. delay 延迟开始输出的时间delay(1000)
  3. repeat 充分执行repeat(2)
  4. finalize 类似finally

错误处理

  1. catchError 处理observable stream中错误
  2. retry 重试retry(1)
  3. retryWhen 重试,需要回调参数

说明

  • 本教成是基于Rxjs v6+

参考信息