2019-07-04 5 minutes read (About 688 words)

RxJS

Key Words: 响应式编程、函数式编程、相当于事件处理的lodash库

Why Rx: 处理同步和异步的事件流、复杂问题简单化、数据流的概念

How: 组合不同的操作符，观察者模式和迭代器模式的组合observable

前言：数据生产者和数据消费者之间有俩种模式进行数据的交流：

1、Pull 拉取，取决于数据消费者何时去接收数据，数据生产者对数据何时被消费者接收是无意识的。JavaScript中的函数就是y这种拉取的系统，函数本身作为数据生产者，代码通过”拉取”的方式拿到该函数被调用执行后的一个返回值。ES7中的generator生成器函数也是这种模式,调用iterator.next()的代码作为数据消费者，iterator作为数据生产者。

2、Push推送，数据生产者决定何时将数据发送给数据消费者，后者对数据接收这个动作是无意识的。例如ES6中的Promise(数据生产者)。RxJS中的Observable也采用了Push模式来推送数据。

What: 主要理解 Observable && Operators

Observable: 可观察的数据流，可以理解为是数据生产者（Data Producer）。

// 1、通过Observable构造函数新建
// Data Producer 数据生产者，只关注如何产出数据
import { observable } from 'rxjs'
const observable = new Observable((subscriber)=>{
  try{
    subscriber.next('step1')
    subscriber.next('step2')
    subscriber.next('step3')
    // only execute once 
    subscriber.complete('step complete')
  }catch(e){
    // only execute once  
    subscriber.error('step error')
  }
})
// Data Consumer 数据消费者，决定如何消费数据，即如果处理数据
const theObserver = (value) => console.log(value)
// 数据生产者 与 数据消费者 俩者是独立的，只有通过以下方式建立关系，数据消费者才能拿到数据生产者的数据。
observable.subscribe(theObserver) 
// 控制台按顺序输出：step1 step2 step3 step complete

// 2、通过creator operator操作符生成的observable 
import { of } from 'rxjs'
of(1,2,3).subscribe(value => console.log(value))
// 控制台顺序输出：1，2，3

operators: 本质上是函数，主要分为俩类: pipe operators && creation operators

1、pipe operators

可以理解为是一个管道，将流进管道的数据流做处理后再输出新的处理完后的数据流，并且不会改变原数据流，与函数式编程中的Pure Function类似，(如果订阅了输出后的数据流，则对同时订阅输入的数据流Subscribing to the output Observable will also subscribe to the input Observable)?。

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

map(x => x * x)(of(1, 2, 3)).subscribe((v) => console.log(`value: ${v}`));

// Logs:
// value: 1 
// value: 4
// value: 9

2、creation operators

Posts

RxJS

Tag Cloud

Categories

Recent

Archives

Tags

Categories

Recent

Archives

Tags

Your browser is out-of-date!