JavaScript中rxjs与 Observable 两大类操作符解析

2024-09-28 10:41:16

前言

Observable 生产的数据，应该提供开发人员足够的自由度，对这些数据进行各种处理，比如 map / transform 等等。这就是 Rxjs Operator 大展身手的地方。

运算符是对 Observable 进行操作并返回 Observable 的函数。这允许我们链接这些运算符。链中的每个运算符都会修改由前一个运算符的运算产生的 Observable。

链中的算子不会同时工作，而是按顺序运行，每个算子都在链中前一个算子生成的 Observable 上工作。

订阅是使用 subscribe 运算符完成的。订阅操作符允许观察者连接 Observable。观察者要从 Observable 获取数据或错误，首先必须订阅该 Observable。

Rxjs 里的 Operator 可以分为两大类。

1. 可以加入到 pipe 链式操作的 Operator

可管道运算符是可以链接在一起的运算符。这些是纯函数，它们将可观察对象作为输入并提供可观察对象作为输出。

伪代码如下：

observeable.pipe(
  operator1(),
  operator2(),
  operator3(),
  operator3(),
)

operator1 将接收 observable，对其执行操作并发出 observable。从 operator1 发出的 observable 被传递给 operator2 作为输入（通过其余的运算符以此类推）。

filter、mergeMap 和 forkJoin 是可管道操作符的一些示例。

2. 创建型 Operator

创建操作符是创建新 Observable 的独立函数。最典型的创建操作符就是 of:

import { of } from 'rxjs';
const observable = of(1, 2, 3);

变量 observable 是一个 Observable 类型的实例，它将发出 1、2 和 3（按顺序）。

create, of 和 from 是创建型操作符的典型例子。

3. 冷热 Observable 的区别

Code Observable 在观察者订阅它之前不会开始发出值。

相反的，Hot Observable 可以随时开始发出值，订阅者可以随时开始观察发出的值。但是，订阅者可能会错过订阅时间之前发出的任何值。

看个例子：

import { Observable } from 'rxjs';
const observable = Observable.create((observer: any) => {
  observer.next('Hello World!');
});
observable.subscribe((message) => console.log(message)); // Hello World!

这个 Observable 发射的值就是 Hello World. 它会调用订阅者的 next 方法进行发射。

Observable.create 的输入参数是一个订阅者 subscriber. 这是一个函数，函数的输入参数是 Observer，类型为 any. 函数体为执行该输入参数的 next 方法。

Observable 的构造函数很简单，就把 create 传入的函数，设置到 Observable 内部属性 _subscribe 里：

然后针对 Observable.create 返回的 Observable 实例，调用 subscribe 方法进行订阅。

订阅者的逻辑通过 subscribe 方法传入，是一个函数：

toSubscriber 方法会创建一个订阅者 subscriber 实例：

subscriber 的构造函数里，就是简单的为 destination 字段赋值：

这里把 subscribe 函数传入的应用逻辑，赋给 safeSubscriber 的 _next 属性：

然后执行 _subscribe 方法：

这个 _subscribe 方法就是 subscribe 函数调用第一步，把 subscribe 传入的应用逻辑赋给 _subscribe 属性的那个函数。

注意，subscribe 函数调用，首先会触发 Observable 的 emit value：

this._next 触发 destination.next:

这里调用 SafeSubscriber 的 _next 属性指向的方法，即 subscribe 传入的函数实现：

总结一下，Observable.create 和 Observable.subscribe 这套调用, 首先会触发 Observable 实例调用 next 方法，发射调用创建操作符时指定的待发射值。接着会触发应用开发人员传入 subscribe 调用的业务逻辑，消费这个发射的值。

这段代码执行的先后顺序如下：

到此这篇关于JavaScript中rxjs与 Observable 两大类操作符解析的文章就介绍到这了,更多相关JS rxjs与 Observable 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

RxJS的入门指引和初步应用

前言 RxJS是一个强大的Reactive编程库,提供了强大的数据流组合与控制能力,但是其学习门槛一直很高,本次分享期望从一些特别的角度解读它在业务中的使用,而不是从API角度去讲解. RxJS简介通常,对RxJS的解释会是这么一些东西,我们来分别看看它们的含义是什么. Reactive Lodash for events Observable Stream-based 什么是Reactive呢,一个比较直观的对比是这样的: 比如说,abc三个变量之间存在加法关系: a = b + c 在传统
Rxjs TakeUntil 操作符内容梳理总结

TakeUntil 的官方文档对这个操作符的解释是: Emit values until provided observable emits. 即它可以被赋予另一个起锚定作用的 Observable,当该锚定 Observable emit 值时,原始的 Observable 就停止发射值,进入 complete 操作. 看一个实际的例子: import { interval, timer } from 'rxjs'; import { takeUntil } from 'rxjs/operat
使用RxJS更优雅地进行定时请求详析

在用 Angular 做项目的时候,遇到了一个有点麻烦的问题.具体问题如下: 轮循请求某个接口,如何保证接口返回的数据与请求的顺序相同? 实际的业务场景是这样的:前端需要轮循请求后端接口获取文件处理进度,并在前端用进度条展示.如下方所示: 首先想到的肯定是使用 setTimeout 或者 setInterval 进行定时请求.然而结果有点诡异,进度条的变化不是递增,而是有快有慢,比如 30%,20%,50%,40%这样.仔细一想也知道问题出在哪,异步请求的结果并不是按顺序返回的. 我在之前的工作
RxJS在TypeScript中的简单使用详解

1. 安装 # 安装 typescript, rxjs 包 npm install -D typescript @types/node npm install rxjs 2. 使用 2.1 使用 from 来从数组生成源 RxJS 有许多创建源的方法,如 from, fromEvent..., 这里使用 from做个例子 import {from} from 'rxjs' // 从数组生成可订阅对象 // obser 的对象类型为 Observable let obser = from([1,2
学习RxJS之JavaScript框架Cycle.js

是什么 Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简称HCI): 函数式 Cycle.js 把应用程序抽象成一个纯函数 main(),从外部世界读取副作用(sources),然后产生输出(sinks) 传递到外部世界,在那形成副作用.这些外部世界的副作用,做为Cycle.js的插件存在(drivers),它们负责:处理DOM.提供HTTP访问等. 响应式 Cycle.js 使用 rx.js 来实现关注分离,这意
JavaScript中的observables 操作符创建实例

目录一.创建实例 1.create 2.empty 3.from 4.of 5.fromEvent 6.fromPromise 7.interval 8.timer 操作符是 observables 背后的马力,为复杂的异步任务提供了一种优雅的声明式解决方案. 本篇就带领大家 “粗略” 过一下 observable 创建实例的重点 API 都有哪些?以及用代码片段展示出用法示意~ 一.创建实例 1.create cre
JavaScript中rxjs与 Observable 两大类操作符解析

目录前言 1. 可以加入到 pipe 链式操作的 Operator 2. 创建型 Operator 3. 冷热 Observable 的区别前言 Observable 生产的数据,应该提供开发人员足够的自由度,对这些数据进行各种处理,比如 map / transform 等等.这就是 Rxjs Operator 大展身手的地方. 运算符是对 Observable 进行操作并返回 Observable 的函数. 这允许我们链接这些运算符. 链中的每个运算符都会修改由前一个运算符的运算产生的 O
JavaScript中实现new的两种方式引发的探究

前言当你 new 一个构造函数时发生了什么? "众所周知"的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型:通过 this 将属性和方法添加至这个对象:最后返回 this 指向的新对象,也就是实例. 一般来说在js中大概是这样的: function Mynew(parent,...rest){ let obj={}; obj.__proto__=parent.prototype; let res=parent.apply(obj,rest); return type
JavaScript中的函数的两种定义方式和函数变量赋值

复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /*I总结: 1.函数名可以做变量使用,可以赋值,可以传值 2.函数名当参数,传递给另一个函数 */ //===========
如何在JavaScript中实现私有属性的写类方式(一)

之前讨论过JavaScript中的写类方式.但没有讨论私有的实现.这篇看下. 我们知道JS中私有属性的实现本质就是 var + closure.如下复制代码代码如下: function Person(n, a){ // public this.name = n; // private var age = a; this.getName = function(){ return this.name; } this.getA
JavaScript中最常见的三个面试题解析

前言本文不是讲述最新的JavaScript库,日常的开发实践或任何新的 ES6 函数. 相反,在讨论JavaScript时,经常会在面试中出现这3个问题. 我自己被问到过这些问题,我的朋友告诉我他们也被到问过. 当然,你在JavaScript面试前不应该只学习这3个问题 – 这里有很多方法可以让你更好地准备即将到来的面试 – 但面试官可能会问到下面是3个问题,来判断你对JavaScript语言的理解和DOM的掌握程度. 让我们开始吧!请注意,我们将在下面的示例中使用原生 JavaScrip
如何在JavaScript中实现私有属性的写类方式(二)

上一篇写了个工具函数$class,这篇再完善以下.实现以下功能 1,继承 2,子类继承父类时,不继承父类的私有属性复制代码代码如下: /** * @param {String} className * @param {String/Function} superCls * @param {Function} classImp */function $class(className, superCls, classImp){ if(superCls === '') superC
javaScript中一些常见的数据类型检查校验

目录前言常见的几种数据校验方式 typeof操作符 instanceof constructor call && apply Object.prototype.toString结合Function.prototype.call && apply 其他校验数据类型的方法: 总结源码地址前言在JavaScript中,数据类型分为两大类,一种是基础数据类型,另一种则是复杂数据类型,又叫引用数据类型基础数据类型:数字Number 字符串String 布尔Boolean
JavaScript 中有关数组对象的方法(详解)

JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .
JavaScript中定义类的方式详解

本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象在Javascript中,我们用function来定义类,如下: function Sh
详解JavaScript中任意两数加减的解决方案

目录写在前面分析填坑思路解决整数加减的坑转换科学计算解决整数减法的坑解决小数加法的坑解决小数减法的坑解决整数加小数的通用问题总结写在前面本文是从初步解决到最终解决的思路,文章篇幅较长虽然是一篇从0开始的文章,中间的思维跳跃可能比较大代码的解析都在文章的思路分析和注释里,全文会帮助理解的几个关键词 1.Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 2.15长度的字符串 3.padStart 和 padEnd 分析填坑思

JavaScript中rxjs与 Observable 两大类操作符解析

目录

前言

1. 可以加入到 pipe 链式操作的 Operator

2. 创建型 Operator

3. 冷热 Observable 的区别

相关推荐

随机推荐