Rxjs简介

最新推荐文章于 2023-07-24 13:47:12 发布

「已注销」

最新推荐文章于 2023-07-24 13:47:12 发布

阅读量642

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_58047238/article/details/119845470

版权

定义

一组可用来处理非非同步或事件的JavaScript函数库。
非同步
- AJAX 、XHR（XMLHttpRequest）、fetch API
- Service Worker、Node Stream
- setTimeout、setInterval
- Promise
事件
- 各式DOM事件（click、dbclick、keyup等）
- CSS动画事件
- HTML5、Geolocation、WebSockets、Server Send Event

核心概念

Observable：可观察的物件。代表一组未来即将产生的事件资料（被观察的物件）。
Observer：观察者物件。代表一个用来接收观察结果的物件（收到的就是事件资料）。观察者物件就是一个物件包含3个含有回呼函式的属性（next、err、complete）。
Subscription：订阅物件。代表正在执行Observable/Observer的执行个体。（可用来取消订阅）
Operators：运算子。必须拥有函数编程中所定义的纯函数（pure function）特性（没有副作用的函数）。主要用来处理一系列的事件资料集合。常见的运算子包含map、filter、concat、flatMap、switchMap等。
Subject：主体物件。如同EventEmitter一样，主要用来广播收到的事件资料给多位Observer（观察者）。
Schedulers：排程控制器。用来集中管理与调度多重事件之间的资料，以控制事件并发情况（control concurrency）。

官网

https://rxjs.dev/

const { interval} =rxjs;
const {take} = rxjs.operators;

interval(500)
  .pipe(take(4))
  .subscribe(console.log);

var subs=rxjs.interval(500).pipe(rxjs.operators.take(40)).subscribe(console.log);
subs.unsubscribe();

import {interval} from 'rxjs';
import { take } from 'rxjs/operators';

interval(500)
  .pipe(take(4))
  .subscribe(console.log);

RxJS的运作方式

建立可观察的Observal物件。

var clicks$ = rxjs.fromEvent(document,'click');

套用filter运算子

const { filter } =rxjs.operators;
clicks$= clicks$.pipe(filter(x=>x.clientX<100));

建立观察者物件（Observer）。

var observer = {next :(x)=>console.log(x)};

建立订阅事件（订阅Observable物件，并传入Observer观察者物件）。

var subs$ = clicks$.subscribe(observer);

取消订阅Subscription物件

subs$.unsubscribe();

第二三步简化写法

var subs$ =clicks$.subscribe( x=>console.log(x) );

主体物件`Subject`的用法

// 建立主体物件（之后要靠这个主体物件进行传播）
var subject = new rxjs.Subject();
//建立可观察的Observable物件
var  clicks$ = rxjs.fromEvent(document,'click');
// 设定最多取得两个事件资料就将Observable物件为完成
clicks$=clicks$.pipe(take(2));
//设定将ckicks$全部交由subject主体物件进行广播
clicks$.subscribe(subject);
// 最后再由subject建立Observer观察者物件
var subs1$ =subject.subscribe((x)=>console.log(x.clientX));
var subs2$ =subject.subscribe((x)=>console.log(x.clientX));
//取消订阅
subs1$.unsubscribe();
subs2$.unsubscribe();