46、RxJS 基础核心概念及操作符详解

于 2025-11-21 12:59:11 发布
阅读量8 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Angular与TypeScript实战 文章标签： RxJS 操作符 pipe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/vodka/article/details/155113441

RxJS 基础核心概念及操作符详解

1. RxJS 操作符基础

1.1 操作符组合

操作符是可组合的，能够将它们链接起来，使得可观察对象发出的项在到达观察者之前可以由一系列操作符进行处理。例如： 

const beers = [
  {name: "Stella", country: "Belgium", price: 9.50},
  {name: "Sam Adams", country: "USA", price: 8.50},
  {name: "Bud Light", country: "USA", price: 6.50}
];
from(beers)
 .filter(beer => beer.price < 8)
 .map(beer => `${beer.name}: $${beer.price}`)
 .subscribe(
    beer => console.log(beer),
    err => console.error(err)
  );
console.log("This is the last line of the script");

从 RxJS 6 开始，链接操作符的唯一方法是使用 pipe() 方法，将用逗号分隔的操作符作为参数传递给它。

1.2 可管道操作符

1.2.1 点链操作符的问题

在 RxJS 6 之前，可以使用点来链接操作符。但这种方式存在问题，例如导入点链操作符时： 

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

这些操作符会修补 Observable.prototype 的代码，如果后续移除某个操作符但忘记移除对应的导入语句，打包工具在进行树摇时可能会保留未使用的代码。

1.2.2 可管道操作符的优势

RxJS 5.5 引入了可管道操作符，它们是纯函数，不会修补 Observable 。可以使用 ES6 导入语法导入操作符，然后将它们包装在 pipe() 函数中： 

import {map, filter} from 'rxjs/operators';
import {from} from 'rxjs';
from(beers)
 .pipe(
    filter(beer => beer.price < 8),
    map(beer => `${beer.name}: $${beer.price}`)
  )
 .subscribe(
    beer => console.log(beer),
    err => console.error(err)
  );

这样，如果移除某个操作符，打包工具的树摇模块可以识别出未使用的导入函数，相应操作符的代码将不会包含在打包文件中。

1.3 异步可观察对象

默认情况下， from() 函数返回同步可观察对象。如果需要异步可观察对象，可以使用第二个参数指定异步调度器： 

from(beers, Scheduler.async)

这样修改后，会先打印 “This is the last line of the script”，然后再发出啤酒信息。

1.4 reduce 操作符

reduce 操作符允许聚合可观察对象发出的值。它有两个参数：一个累加器函数和一个初始值。例如： 

const beers = [
  {name: "Stella", country: "Belgium", price: 9.50},
  {name: "Sam Adams", country: "USA", price: 8.50},
  {name: "Bud Light", country: "USA", price: 6.50},
  {name: "Brooklyn Lager", country: "USA", price: 8.00},
  {name: "Sapporo", country: "Japan", price: 7.50}
];
from(beers)
 .pipe(
    map(beer => beer.price),
    reduce( (total, price) => total + price, 0)
  )
 .subscribe(
    totalPrice => console.log(`Total price: ${totalPrice}`)
  );

运行此脚本将输出所有啤酒的总价。 reduce 操作符在可观察对象完成时发出聚合结果。

2. 使用观察者 API

2.1 观察者的定义

观察者是实现了 next() 、 error() 和 complete() 函数中的一个或多个的对象。例如： 

const beerObserver = {
  next: function(beer) { console.log(`Subscriber got ${beer.name}`)},
  error: function(err) { console.err(error)},
  complete: function() {console.log("The stream is over")}
}

2.2 可观察对象的创建

可以使用 create 方法创建可观察对象，传递一个代表观察者的参数： 

const beerObservable$ = Observable.create( observer => observer.next(beer));

在订阅时，可观察对象才会知道具体提供的是哪个观察者。

2.3 完整示例 

function getObservableBeer(){
  return Observable.create( observer => {
    const beers = [
      {name: "Stella", country: "Belgium", price: 9.50},
      {name: "Sam Adams", country: "USA", price: 8.50},
      {name: "Bud Light", country: "USA", price: 6.50},
      {name: "Brooklyn Lager", country: "USA", price: 8.00},
      {name: "Sapporo", country: "Japan", price: 7.50}
    ];
    beers.forEach( beer => observer.next(beer));
    observer.complete();
  });
}
getObservableBeer()
 .subscribe(
    beer => console.log(`Subscriber got ${beer.name}`),
    error => console.err(error),
    () => console.log("The stream is over")
  );

在这个示例中，我们创建了一个冷可观察对象，因为数据生产者（啤酒数组）是在 getObservableBeer() 可观察对象内部创建的。每个订阅者在查询条件相同时，无论订阅时间如何，都会得到相同的啤酒数据。

2.4 调试可观察对象

tap 操作符可以对源可观察对象发出的每个值执行副作用（例如记录一些数据），但返回的可观察对象与源对象相同，可用于调试： 

import { map, tap } from 'rxjs/operators';
myObservable$
 .pipe(
    tap(beer => console.log(`Before: ${beer}`)),
    map(beer => `${beer.name}, ${beer.country}`),
    tap(beer => console.log(`After: ${beer}`))
  )
 .subscribe(...);

3. 使用 RxJS Subject

3.1 Subject 的概念

RxJS Subject 是一个包含可观察对象和观察者的对象。可以使用 next() 方法将数据推送给其观察者，也可以订阅它。Subject 可以有多个观察者，适用于多播场景，即向多个订阅者发出一个值。

3.2 简单示例 

const mySubject$ = new Subject();
const subscription1 = mySubject$.subscribe(...);
const subscription2 = mySubject$.subscribe(...);
mySubject$.next(123); // each subscriber gets 123

3.3 实际应用示例

考虑一个金融公司的场景，交易员可以下达股票买卖订单，订单需要同时发送给两个脚本：一个用于向证券交易所下单，另一个用于向交易委员会报告订单。 

enum Action{
  Buy = 'BUY',
  Sell = 'SELL'
}
class Order{
  constructor(public orderId: number, public traderId: number,
    public stock: string, public shares: number, public action:Action){}
}
const orders$ = new Subject<Order>();
class Trader {
  constructor(private traderId:number, private traderName:string){}
  placeOrder(order: Order){
    orders$.next(order);
  }
}
const stockExchange = orders$.subscribe(
  ord => console.log(`Sending to stock exchange the order to ${ord.action} ${ord.shares} shares of ${ord.stock}`)
);
const tradeCommission = orders$.subscribe(
  ord => console.log(`Reporting to trade commission the order to ${ord.action} ${ord.shares} shares of ${ord.stock}`)
);
const trader = new Trader(1, 'Joe');
const order1 = new Order(1, 1,'IBM',100,Action.Buy);
const order2 = new Order(2, 1,'AAPL',100,Action.Sell);
trader.placeOrder( order1);
trader.placeOrder( order2);

运行上述代码，两个订阅者都会收到交易员下达的订单信息。

3.4 总结

通过使用 RxJS Subject，可以方便地实现多播功能，将一个值同时发送给多个订阅者。在实际应用中，它可以用于处理需要向多个地方发送数据的场景，如金融交易中的订单处理。

3.5 流程图 

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    A(Trader):::process -->|placeOrder| B(Subject - orders$):::process
    B -->|next| C(Stock Exchange Subscriber):::process
    B -->|next| D(Trade Commission Subscriber):::process

3.6 表格

元素 描述
Action 枚举 定义订单的操作类型，包括 Buy 和 Sell
Order 类 表示订单，包含订单 ID、交易员 ID、股票名称、股数和操作类型
orders$ 主题 用于处理订单的主题，交易员下达的订单会通过它发送给订阅者
Trader 类 表示交易员，有 placeOrder 方法用于下达订单
stockExchange 订阅者 接收订单并向证券交易所发送订单信息
tradeCommission 订阅者 接收订单并向交易委员会报告订单信息

4. flatMap 操作符

4.1 flatMap 操作符的作用

在某些情况下，需要将可观察对象发出的每个项视为另一个可观察对象。 flatMap 操作符可以自动订阅外部可观察对象发出的每个项。它用于“将可观察对象发出的项转换为可观察对象，然后将这些可观察对象的发射结果展平为单个可观察对象”。

4.2 示例：处理饮料托盘

假设有一个可观察对象发出饮料托盘，每个托盘是一个可观察对象，我们要将这些托盘转换为包含单个饮料的输出流。 

function getDrinks() {
  const beers$ = from([
    {name: "Stella", country: "Belgium", price: 9.50},
    {name: "Sam Adams", country: "USA", price: 8.50},
    {name: "Bud Light", country: "USA", price: 6.50}
  ], Scheduler.async);
  const softDrinks$ = from([
    {name: "Coca Cola", country: "USA", price: 1.50},
    {name: "Fanta", country: "USA", price: 1.50},
    {name: "Lemonade", country: "France", price: 2.50}
  ], Scheduler.async);
  return Observable.create( observer => {
    observer.next(beers$);
    observer.next(softDrinks$);
    observer.complete();
  });
}
// We want to "unload" each palette and print each drink info
getDrinks()
 .pipe(flatMap(drinks => drinks))
 .subscribe(
    drink => console.log(`Subscriber got ${drink.name}: ${drink.price}`),
    error => console.err(error),
    () => console.log("The stream of drinks is over")
  );

运行此脚本将输出每个饮料的信息。

4.3 示例：处理 HTTP 请求

在 Angular 中，HTTP 请求返回可观察对象。当需要执行多个 HTTP 请求，且第一个请求的结果要用于第二个请求时，可以使用 flatMap 操作符。 

import {flatMap} from 'rxjs/operators';
httpClient.get('/customers/123')
 .pipe(
    flatMap(customer => this.httpClient.get(customer.orderUrl))
  )
 .subscribe(response => this.order = response);

这样可以避免嵌套的 subscribe() 调用。

4.4 示例：监控交易员订单

考虑一个场景，有两个 Subject 实例： traders$ 用于跟踪交易员， orders$ 用于跟踪每个交易员下达的订单。作为经理，想要监控所有交易员下达的订单。 

enum Action{
  Buy = 'BUY',
  Sell = 'SELL'
}
class Order{
  constructor(public orderId: number, public traderId: number,
    public stock: string, public shares: number, public action: Action)
  {}
}
let traders$ = new Subject<Trader>();
class Trader {
  orders$ = new Subject<Order>();
  constructor(private traderId: number,
    public traderName: string) {}
}
let tradersSubscriber = traders$.subscribe
  (trader => console.log(`Trader ${trader.traderName} arrived`));
let ordersSubscriber = traders$
 .pipe(flatMap(trader => trader.orders$))
 .subscribe(ord =>
    console.log(`Got order from trader ${ord.traderId} to ${ord.action} ${ord.shares} shares of ${ord.stock}`)
  );
let firstTrader = new Trader(1, 'Joe');
let secondTrader = new Trader(2, 'Mary');
traders$.next(firstTrader);
traders$.next(secondTrader);
let order1 = new Order(1,1,'IBM',100,Action.Buy);
let order2 = new Order(2,1,'AAPL',200,Action.Sell);
let order3 = new Order(3,2,'MSFT',500,Action.Buy);
// Traders place orders
firstTrader.orders$.next(order1);
firstTrader.orders$.next(order2);
secondTrader.orders$.next(order3);

运行此代码，订阅者将收到所有交易员下达的订单信息。

4.5 流程图 

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    A(traders$ 主题):::process -->|next| B(Trader 实例):::process
    B -->|orders$ 主题| C(flatMap 操作符):::process
    C -->|展平结果| D(ordersSubscriber 订阅者):::process

4.6 表格

元素 描述
Action 枚举 定义订单的操作类型，包括 Buy 和 Sell
Order 类 表示订单，包含订单 ID、交易员 ID、股票名称、股数和操作类型
traders$ 主题 用于跟踪交易员的主题
Trader 类 表示交易员，每个交易员有自己的 orders$ 主题用于跟踪订单
orders$ 主题 每个交易员的主题，用于处理该交易员下达的订单
tradersSubscriber 订阅者 接收交易员到达的信息
ordersSubscriber 订阅者 接收所有交易员下达的订单信息

总结

本文详细介绍了 RxJS 的一些核心概念和操作符，包括操作符的组合、可管道操作符、 reduce 操作符、观察者 API、RxJS Subject 和 flatMap 操作符。通过具体的代码示例和流程图、表格，展示了这些概念和操作符的使用方法和应用场景。掌握这些知识可以帮助开发者更好地处理异步数据流，实现复杂的响应式编程。

操作步骤总结

  • 操作符组合 ：使用 pipe() 方法将多个操作符组合起来处理可观察对象发出的项。
  • 可管道操作符 ：使用 ES6 导入语法导入操作符，然后将它们包装在 pipe() 函数中，便于打包工具进行树摇优化。
  • reduce 操作符 ：通过指定累加器函数和初始值，聚合可观察对象发出的值。
  • 观察者 API ：创建观察者对象，实现 next() 、 error() 和 complete() 函数，使用 create 方法创建可观察对象并订阅。
  • RxJS Subject ：创建 Subject 实例，使用 next() 方法推送数据，多个订阅者可以接收相同的值。
  • flatMap 操作符 ：自动订阅外部可观察对象发出的每个项，将内部可观察对象的发射结果展平为单个可观察对象。

通过实际代码示例和操作步骤的总结，希望读者能够更好地理解和应用 RxJS 的相关知识。

RxJS在TypeScript中的简单使用详解
10-15
Observable是RxJS中核心的概念，它可以代表任何值或事件的序列，可以是用户输入、来自后端API的数据变化、系统事件等等。 在TypeScript中使用RxJS需要首先安装相关包，可以使用npm来安装typescript和rxjs，具体命令...
9、RxJS核心操作符与流处理详解
net55的博客
09-20 18
本文深入解析了RxJS的核心概念与常用操作符，涵盖延迟求值、订阅与取消机制、操作符的组合与链式调用，并详细介绍了map、filter、reduce、scan等核心操作符的功能与使用场景。同时探讨了RxJS在资源管理、错误处理和与其他API集成时的注意事项，帮助开发者构建高效、可维护的响应式应用。
RxJS 核心原理-操作符（源码实现）
SailingCoder的博客
02-22 1106
本文介绍了 RxJS 中操作符的核心原理和常见操作符的应用场景。通过应用操作符，我们可以构建复杂的数据处理流程，实现数据的转换、过滤、合并等操作。希望本文对你理解 RxJS 操作符的工作原理以及其在实际应用中的用法有所帮助。
RxJS 入门指南：从基础概念到核心操作符详解
gitblog_00049的博客
06-11 473
在现代前端开发中，处理异步数据流是一个常见挑战。RxJS（Reactive Extensions for JavaScript）是一个强大的响应式编程库，它提供了优雅的方式来处理事件序列、异步操作和基于推送的数据流。本文将带你全面了解 RxJS 的核心概念和基本用法。 ## 核心概念解析 ### 1. Observable（可观察对象） Observable 是 RxJS 的核心概念，代表一...
Rxjs 核心概念
weixin_34313182的博客
02-07 175
又一年要过去了，回顾2017，rxjs始终是我在项目里使用最频繁的库，在我看来，它是一个非常优秀的数据处理工具。年初的时候就计划写点什么，碍于目前公司的项目实在抽不出时间，这一拖就到了年底。临近新年，总算忙里偷闲，但又不知道从何写起，于是乎偷了个懒拿起了官方文档开始翻译。以下的文字仅供各位参考，还是强烈建议去看官方文档。 Rxjs概述 简...
RxJS基础教程
JineD的博客
05-09 7565
RxJS是一个基于可观测数据流在异步编程应用中的库。 ReactiveX is a combination of the best ideas from theObserver pattern, theIterator pattern, andfunctional programming 正如官网所说，RxJS是基于观察者模式，迭代器模式和函数式编程。因此，首先要对这几个模式有所理解 观察者模式 window.addEventListener('click', function(){ c...
构建流式应用—RxJS详解
热门推荐
zhoulu001的专栏
11-07 1万+
最近在 Alloyteam Conf 2016 分享了《使用RxJS构建流式前端应用》，会后在线上线下跟大家交流时发现对于 RxJS 的态度呈现出两大类:有用过的都表达了 RxJS 带来的优雅编码体验，未用过的则反馈太难入门。所以，这里将结合自己对 RxJS 理解，通过 RxJS 的实现原理、基础实现及实例来一步步分析，提供 RxJS 较为全面的指引，感受下使用 RxJS 编码是怎样的体验。
详解 Rxjs 响应式编程类库
_
01-11 679
用于 JavaScript 的 ReactiveX 库。 RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。这个项目是Reactive-Extensions/RxJS(RxJS 4) 的重写，具有更好的性能、更好的模块性、更好的可调试调用堆栈，同时保持大部分向后兼容，只有一些破坏性的变更(breaking changes)是为了减少外层的 API 。 入门 RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个.
NestJS核心概念详解：从模块到控制器的完整指南
gitblog_01090的博客
08-22 649
NestJS核心概念详解：从模块到控制器的完整指南 【免费下载链接】nest A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeS...
【Angular中的RxJS】- 概要介绍
老杨头的博客
12-25 1293
RxJS 是Reactive Extensions For JavaScript的简写，它是一个强大的 JavaScript Reactive 编程库。Reactive 是指响应式编程（Reactive Programming）。 中文官方介绍文档：概览 | RxJS 中文文档 1、什么是响应式编程（Reactive Programming） 任何异步事件（比如页面鼠标 click 事件），在响应式编程都是异步事件流。不仅仅是 click、hover 这...
RxJS深入学习：核心操作符详解
"学习rxjs操作符" 在编程领域，RxJS是一个强大的库，专注于处理异步数据流和事件。这个库引入了Observable的概念，它是一个可以观察的数据序列，能够发送各种类型的数据，如数字、字符串、对象或者事件。Observable...
本地模型部署指南[可运行源码]
11-23
本文详细介绍了如何访问和配置本地已部署的模型。首先，用户需要访问指定网址下载并安装chatbox软件。安装完成后，初次进入时需要选择使用自己的模型选项。接着，进入设置界面，选择模型提供方为ollama api，并输入相应的域名（如http://xxxxx:11434），其他设置保持默认，最后点击保存即可完成配置。配置完成后，用户可以选择并使用模型。整个过程简单明了，适合需要本地部署模型的用户参考。
基于ssm框架实现的网上商城.zip
11-23
基于ssm框架实现的网上商城.zip
JDK安装与环境配置[项目代码]
最新发布
11-23
本文详细介绍了JDK的安装和环境变量配置的全过程。首先，从JDK官网下载安装包，然后按照步骤进行安装，默认安装路径为C:Program FilesJavajdk-17。接着，重点讲解了如何配置环境变量，包括新建JAVA_HOME变量和修改Path变量，以便在任意路径下执行Java程序。最后，通过cmd命令验证JDK是否安装成功。此外，文章还附带了一份Python学习资料的推广内容，包括学习路线、视频、书籍、工具包、实战案例和面试题等资源。
C++类和对象基础[项目代码]
11-23
本文详细介绍了C++中类和对象的基础知识，包括面向对象与面向过程的区别、类的定义与访问限定符、封装的概念、类的作用域、实例化过程以及类对象模型的计算方法。文章还深入探讨了this指针的作用和特性，通过实例代码解释了this指针在成员函数中的使用方式及其重要性。此外，文中还涉及了结构体内存对齐规则和空类大小的特殊情况，为读者提供了全面的C++类和对象入门指导。
Windows安装Scrapy指南[项目代码]
11-23
本文详细介绍了在Windows系统下使用Anaconda安装Scrapy的方法，解决了pip无法直接安装Scrapy的问题。Anaconda是一个专注于数据分析的Python发行版本，内置了conda包管理系统，能够方便地管理工具包和虚拟环境。文章解释了Anaconda和conda的概念，并列举了Anaconda的优点，如省时省心、自动处理依赖关系、支持多环境隔离等。此外，还提供了Anaconda的下载链接和安装步骤，最后指导用户通过conda命令安装Scrapy。
基于Bloch方程的磁共振成像序列模拟器Matlab实现
11-23
本资源提供MATLAB多个发行版本（2014、2019a、2021a）的技术支持，配套完整案例数据集及可直接执行的程序文件。程序架构采用模块化设计理念，具备以下技术特征：通过参数配置实现核心算法调整，逻辑结构层次分明，关键代码段配有详细注释说明。 该资源适用于高等院校计算机科学、电子信息技术、应用数学等专业的课程实践、综合课题研究及学位论文开发。内容涵盖智能优化计算、神经网络预测建模、数字信号处理、元胞自动机仿真等典型实验场景，所有案例均通过标准化测试验证。 开发团队由具备十年以上工业级算法研发经验的高级工程师组成，专注于MATLAB科学计算与系统仿真领域。本资源提供经过学术机构验证的完整仿真案例库，适用于教学演示与科研实验。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
【嵌入式通信】基于STM32与RS-232的自定义串口助手设计：实现上下位机可靠通信及数据监控
11-23
内容概要：本文详细介绍了一个基于STM32与PC上位机通过RS-232串口通信的完整系统设计与实现，涵盖硬件电路搭建、STM32固件开发、自定义应用层通信协议设计、PC端串口助手软件开发（C# WinForms）、协议解析、数据记录、通信测试及系统部署等内容。系统采用分层协议架构，支持命令控制、数据传输、CRC校验、状态指示和日志记录等功能，并提供了完整的故障排查与扩展开发指南。; 适合人群：具备嵌入式开发基础的电子工程师、自动化控制技术人员、计算机或电子信息类专业学生，以及对串口通信、STM32开发和上位机软件设计感兴趣的开发者；尤其适合从事工业控制、设备调试和物联网通信项目研发的技术人员。; 使用场景及目标：①实现STM32与PC之间的可靠串口通信；②开发具备协议解析能力的自定义串口助手；③应用于设备监控、数据采集、实验室仪器通信等场景；④作为教学案例帮助理解串口通信协议栈的设计与实现。; 阅读建议：建议结合硬件平台动手实践，重点关注通信协议的设计与CRC校验一致性，注意STM32端与PC端代码的协同调试，同时可利用提供的测试模块验证系统稳定性，便于后续功能扩展与二次开发。
Vue el-tabs右侧按钮实现[代码]
11-23
本文介绍了在Vue.js的element-ui框架中，如何在el-tabs组件的最右侧添加一个按钮的实现方案。通过CSS的position属性，利用relative和absolute定位，将按钮固定在tabs页签切换栏的最右侧。具体实现步骤包括：设置父div为relative定位，el-tabs保持默认布局，按钮使用absolute定位并指定right和top值。代码示例清晰展示了如何结合Vue和CSS实现这一功能。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值