Rxjs 操作符

Posted 2021-01-17 Zero_追梦

1. javascript解决异步编程方案

解决javascript异步编程方案有两种，一种是promise对象形式，还有一种是是Rxjs库形式，Rxjs相对于Promise来说，有好多Promise没有的特性和功能，使用起来更便捷简单；

2. Rxjs 简单介绍

Rxjs 是Reactive Extensions JavaScript 的简写，响应式异步编程；同Promise对象一样，是解决JS异步编程的一种解决方案；

3. Rxjs使用

1. Rxjs是一个库，需要使用npm进行安装；

    // 安装rxjs

    npm install rxjs --save

    // 安装rxjs-compat, rxjs-compat软件包在v5和v6之间创建了一个api兼容层

    npm install rxjs-compat --save

2. Rxjs常用操作符

2-1. 创建操作符: fromEvent、 from、 of、 interval、 create

(1). fromEvent: 创建一个 Observable，该 Observable 发出来自给定事件对象的指定类型事件

// 获取html元素
const btnElem = document.querySelector(‘button#rxjsBtn‘);
// 创建按钮的点击事件为可观察对象
Rx.Observable.fromEvent(btnElem, ‘click‘) 
.scan(count => count + 1, 0) // count为定义的变量；逗号后面的0为count的初始值；箭头后面的语句值为scan返回的值；
.subscribe((count) => {
    console.log(‘fromEvent‘ + count);
});


/// 第一次点击输出: fromEvent1；第二次点击输出fromEvent2;依次同理

(2). from: 将各种其他对象和数据类型转化为 Observables

const arrayData = [5, 6];
Observable.from(arrayData).pipe(
    scan((scanData, item) => scanData += item, 10),
    map((item) => item * 2),
).subscribe((data: any) => {
    console.log(‘from:‘ + data);

});


/// 浏览器输出 from:30 from:42

(3). of: 创建一个 Observable，它会依次发出由你提供的参数，最后发出完成通知。

Observable.of(‘value1‘, ‘value2‘)
.subscribe((data: any) => {
    console.log(‘of：‘ + data);
});


/// 浏览器输出 of：value1 of: value2

(4). interval: 返回一个无线自增的序列整数

const numbers = Rx.Observable.interval(1000);
numbers.subscribe(x => console.log(‘interval:‘+x));


/// 浏览器输出: interval:1 interval2 依次增加

(5). create: 创建Observable对象, 当观察者( Observer )订阅该 Observable 时，它会执行指定的函数

const obs = Observable.create((obsever) => {
      obsever.next(‘add‘);
      obsever.next(‘upt‘);
      obsever.complete(); // 代表完成，之后的语句将不再会被调用;;;
      obsever.next(‘del‘);
    });
    // 订阅观察者
    obs.map(data => data + ‘Map‘).subscribe((data: any) => {
      console.log(data);
    });
    /// 浏览器输出: addMap uptMap

2-2. 转换操作符 : Map、MergeMap、MapTo、Scan

(1). Map: 把每个源值传递给转化函数以获得相应的输出值

Rx.Observable.from([1, 2])
.map((item) => item * 2)
.subscribe((data: any) => { console.log(‘map:‘ + data);});


/// 浏览器输出: map: 2 map: 4

(2). MergeMap: 将每个源值投射成 Observable ，该 Observable 会合并到输出 Observable 中;;;;可用于串联请求

const mergeA = Observable.of(1, 2, 3);
const mergeB = mergeA.map(r => Observable.of(r)).mergeMap(r => r);
mergeB.subscribe(c => console.log(‘mergeMap:‘ + c));


/// 浏览器输出: mergeMap1 mergeMap2 mergeMap3

(3). MapTo: 类似于 map，但它每一次都把源值映射成同一个输出值。

Observable.of(1, 2, 3).mapTo(33).subscribe(data => {console.log(data);});


/// 浏览器输出: 3个55

(4). Scan: 对源 Observable 使用累加器函数， 返回生成的中间值， 可选的初始值

Rx.Observable.from([1, 2]).pipe(
  scan((acc, item) => acc += item, 10)) // acc为一个新变量，item为[1,2]中的每一项， 10为新变量acc的默认初始值；返回新生成的中间值acc reduce同理
  .subscribe(v => console.log(v))


///  浏览器输出 11  13

2-3. 数学和聚合操作符：reduce

(1). reduce: 和scan同理；只不过中间变量的值不会清0，会保留上一次源操作之后的得到的中间值；并且只会输出最后一个值；

Rx.Observable.from([1, 2]).pipe(
  reduce((acc, item) => acc += item, 10))
  .subscribe(v => console.log(v))

// 输出

13

2-4. 过滤操作符: filter、throttleTime

(1). filter: 数据进行过滤返回你想要的数据

import {Observable} from ‘rxjs‘;
import {filter} from ‘rxjs/internal/operators‘;

 

from([2, 3, 4]).pipe(
    filter(item => item <= 3))
    .subscribe(v => console.log(v))

// 浏览器输出: 2 3

(2). throttleTime: 在一定时间范围内不管产生了多少事件，它只放第一个过去，剩下的都将舍弃

实现: 一秒内不管有多少点击事件；只触发一次点击事件;，

const throttleElem = document.querySelector(‘#throttleElem‘);
    // 一秒内只触发一次点击事件
    Rx.Observable.fromEvent(throttleElem, ‘click‘)
      .throttleTime(1000)
      .scan(count => count + 1, 0)
      .subscribe(data => {
        console.log(‘点击了‘ + data + ‘次‘);
      });