32、RxJS 实战：从基础到应用

最新推荐文章于 2025-12-06 04:35:55 发布

net55

最新推荐文章于 2025-12-06 04:35:55 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

分类专栏： RxJS响应式编程实战文章标签： RxJS 反应式编程可观察对象

本文链接：https://blog.youkuaiyun.com/net55/article/details/153173988

RxJS响应式编程实战专栏收录该内容

32 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

RxJS 实战：从基础到应用

1. RxJS 新功能与学习回顾

在探索过程中，我们实现了新的利息支付功能，并且几乎全程都在与流进行交互，这正是 RxJS 的魅力所在。当前所见不过是该模式应用的冰山一角，还可以访问并运行基于此架构构建的示例应用（https://github.com/RxJSInAction/rxjs-in-action ），其中包含了更多不同复杂度的示例。

一路走来，我们从反应式编程的基础出发，直至构建出成熟的 Web 应用。期间，学习了如何创建和销毁可观察对象，掌握了合并与拆分可观察对象的方法，能够按需注入或提取信息。还对围绕可观察对象的时间概念进行了实验，并利用这些理解构建出更纯粹、更易测试的函数。

2. 关键要点总结

数据处理与项目集成 ：深入理解数据的转换和移动方式，有助于在项目中合理引入 RxJS。
事件流向管理 ：通过循环流确保事件单向流动，从而创建易于理解的复杂 UI 交互。
状态管理与组件分离 ：以不可变方式管理状态，并保持组件分离，实现关注点的清晰分离，使架构能够在不线性增加复杂度的情况下支持新功能。
Subject 的使用 ：Subject 可用于实现高级中间件或流代理解决方案，但因其兼具可观察对象和观察者的特性，调试难度较大，建议尽量减少使用并进行良好封装。
异步数据处理中间件 ：借助 RxJS 创建处理异步数据流的中间件，使 UI 分发的操作能够通过可观察管道转换为独立的操作。
与 Redux/React 架构的融合 ：RxJS 是 Redux/React 架构（即 3R）的重要组成部分。

3. 相关库的安装

为了更好地实践 RxJS，需要安装一些相关的库，以下是具体的安装信息：
- 示例项目安装
- 主代码仓库：https://github.com/RxJSInAction/rxjs-in-action ，包含可运行的代码示例。
bash git clone https://github.com/RxJSInAction/rxjs-in-action.git cd rxjs-in-action npm install npm start # 打开浏览器访问 localhost:8080
- 仅用于特定部分的仓库：https://github.com/RxJSInAction/banking-in-action ，包含独立应用。
bash git clone https://github.com/RxJSInAction/banking-in-action.git cd banking-in-action npm install npm start # 打开浏览器访问 localhost:8080
- 具体库安装
| 库名称 | 版本 | 主页 | 浏览器安装方式 | Node 安装方式 |
| ---- | ---- | ---- | ---- | ---- |
| RxJS | 5.0.2 | https://github.com/ReactiveX/rxjs | https://unpkg.com/rxjs/bundles/Rx.min.js | npm install rxjs |
| Ramda.js | 0.18.0 | http://ramdajs.com/ | | npm install ramda |
| PouchDB | 5.3.2 | https://pouchdb.com/ | | npm install pouchdb |
| Moment.js | 2.13.0 | http://momentjs.com/ | | npm install moment |
| Google client APIs | 14.0.0 | https://www.npmjs.com/package/googleapis | <script src="https://apis.google.com/js/api.js"> </script> | npm install googleapis |
| Bitly Web API | - | https://app.bitly.com | 进行 AJAX 调用：https://api-ssl.bitly.com | npm install bitly |
| Mocha | 3.1.0 | https://mochajs.org/ | | npm install mocha |
| Chai.js | 3.5.0 | https://www.npmjs.com/package/chai | | npm install chai |
| React.js | 15.3.1 | https://facebook.github.io/react/ | | npm install react react-dom |
| React - Bootstrap | 0.30.0 | https://react-bootstrap.github.io/ | | npm install react-bootstrap |
| Redux.js | 3.6.0 | http://redux.js.org/ | | npm install redux |

4. 操作符选择

RxJS 提供了丰富的操作符，以下是一些常用操作符及其使用场景：
- 静态作用域操作符
| 情况 | 目的 | 操作符 |
| ---- | ---- | ---- |
| 创建新实例 - 自定义逻辑 | - | create |
| 创建新实例 - 给定值 | - | of |
| 创建新实例 - 类似可观察对象 | - | from |
| 创建新实例 - 数字范围 | - | range |
| 创建新实例 - 异常处理 | - | catch |
| 创建新实例 - ES6 承诺 | - | fromPromise |
| 创建新实例 - 事件发射器事件 | - | fromEvent |
| 包装回调 | - | bindCallback |
| 附加依赖资源 | - | using |
| 发起 AJAX 请求并合并结果 | - | ajax |
| 条件创建流 | - | if |

实例作用域操作符
| 情况 | 目的 | 操作符 |
| ---- | ---- | ---- |
| 创建基于时间的实例 - 单定时间隔 | - | timer |
| 创建基于时间的实例 - 多定时间隔 | - | interval |
| 创建基于时间的实例 - 并行运行并收集最后元素 | - | forkJoin |
| 转换序列 - 延迟或偏移事件序列发射 | - | delay |
| 转换序列 - 前置元素到流 | - | startWith |
| 转换序列 - 一对一转换元素 | - | map |
| 转换序列 - 折叠事件序列为单值 | - | reduce |
| 转换序列 - 类似 reduce 但发射中间结果 | - | scan |
| 转换序列 - 提取对象属性 | - | pluck |
| 转换序列 - 缓冲一定数据并一次性发射 | - | bufferCount |
| 转换序列 - 按时间缓冲并一次性发射 | - | bufferTime |
| 转换序列 - 按从属可观察对象发射缓冲 | - | buffer |
| 转换序列 - 用函数控制缓冲关闭 | - | bufferWhen |
| 过滤序列 - 按谓词函数移除事件 | - | filter |
| 过滤序列 - 跳过一定数量事件 | - | skip |
| 过滤序列 - 获取前 N 个事件 | - | take |
| 过滤序列 - 发射直到从属可观察对象发射 | - | takeUntil |
| 过滤序列 - 发射序列第一个事件 | - | first |
| 过滤序列 - 发射序列最后一个事件 | - | last |
| 过滤序列 - 按时间跨度发射 | - | debounce |
| 过滤序列 - 固定时间去抖动 | - | debounceTime |
| 过滤序列 - 按时间间隔发射 | - | throttleTime |
| 过滤序列 - 发射不同元素 | - | distinctUntilChanged |
| 过滤序列 - 按键比较发射不同元素 | - | distinctUntilKeyChanged |
| 工具 - 执行副作用 | - | do |
| 工具 - 装饰事件对象时间间隔 | - | timeInterval |
| 错误处理 - 捕获异常并替换为继续流 | - | catch |
| 错误处理 - 终止序列到错误处理程序 | - | throw |
| 错误处理 - 重试操作 | - | retry |
| 错误处理 - 实现重试策略 | - | retryWhen |
| 错误处理 - 完成或出错时调用函数 | - | finally |
| 协调序列 - 合并最新值 | - | combineLatest |
| 协调序列 - 源发射时合并最新值 | - | withLatestFrom |
| 连接多个可观察序列 - 按到达顺序转发事件 | - | merge |
| 连接多个可观察序列 - 按顺序追加事件 | - | concat |
| 连接多个可观察序列 - 中途替换源可观察对象 | - | switch |
| 连接多个可观察序列 - 按索引合并 | - | zip |
| 投影或分支 - 合并可观察对象 | - | mergeMap |
| 投影或分支 - 处理后释放源可观察对象 | - | switchMap |
| 投影或分支 - 投影并保持顺序 | - | concatMap |
| 广播结果 - 创建可控制的延迟可观察对象 | - | publish |
| 广播结果 - 共享结果给多个订阅者 | - | share |
| 广播结果 - 共享最后 N 个事件 | - | publishReplay |
| 广播结果 - 共享最后一个事件 | - | publishLast |
| 取消/处理流 - 取消订阅 | - | unsubscribe() |

5. 其他重要概念

数据处理与编程范式
- 数据来源识别 ：数据来源多样，包括静态数据、生成数据、同步和异步的单值与多值数据。通过 Rx.Observable 可以包装这些数据来源，创建 RxJS 可观察对象。在识别数据来源时，要区分不同类型的数据，并了解拉取和推送语义，以便在合适的场景中使用 RxJS。
- 数据驱动编程 ：数据驱动编程强调以数据为核心，通过对数据的处理和转换来实现程序的功能。在 RxJS 中，数据管道和流的处理是数据驱动编程的体现。
异步编程与测试
- 异步计算对比 ：与同步计算相比，异步计算通过事件发射器、回调函数等方式避免阻塞代码，提高程序的性能和响应性。但异步代码的测试相对复杂，需要处理 AJAX 请求和 Promises 等。
- 异步代码测试 ：测试异步代码时，要注意处理 AJAX 请求和 Promises。对于 AJAX 请求，可以使用模拟数据或拦截请求的方式进行测试；对于 Promises，要确保正确处理异步结果。
错误处理
- 常见错误处理技术 ：包括使用 try/catch 块、将错误委托给回调函数以及使用 Promise 的错误处理机制。
- 失败处理策略 ：当出现失败时，要能够捕获错误、将错误传播给观察者、对错误做出反应，并实现重试策略。

通过以上对 RxJS 的深入学习和实践，我们可以更好地利用其强大功能构建高效、可维护的应用程序。在实际项目中，要根据具体需求合理选择操作符和库，遵循最佳实践，不断优化代码。

6. 具体应用场景与操作技巧

6.1 业务流程协调

在实际应用中，协调业务流程是一项重要任务。可以通过构建反应式数据库来实现这一目标，具体步骤如下：
1. 相关操作的连接 ：将数据库中相关的操作进行连接，确保数据的一致性和连贯性。例如，在处理用户信息时，将用户注册、登录、信息更新等操作进行关联。
2. 反应式填充数据 ：利用 RxJS 的特性，实现数据库的反应式填充。当有新的数据产生时，自动更新数据库中的相关记录。例如，当用户提交新的订单时，数据库自动更新订单记录。
3. 观察对象生命周期的挂钩 ：在观察对象的生命周期中进行挂钩，实现对业务流程的监控和管理。例如，在用户注册成功后，触发发送欢迎邮件的操作。
4. 并行流的合并 ：使用 combineLatest 和 forkJoin 操作符来合并并行流。例如，在获取用户信息和订单信息时，可以并行获取这两个流的数据，并在数据都准备好后进行处理。

graph LR
    A[开始] --> B[连接相关操作]
    B --> C[反应式填充数据]
    C --> D[挂钩观察对象生命周期]
    D --> E[合并并行流]
    E --> F[结束]

6.2 拖拽操作实现

使用 concatMap 操作符可以实现拖拽和放下的功能，具体步骤如下：
1. 监听拖拽事件 ：通过 fromEvent 操作符监听 DOM 元素的拖拽事件，如 dragstart 、 dragover 和 drop 事件。
2. 处理拖拽过程 ：在拖拽过程中，使用 concatMap 操作符对事件进行处理，确保事件按顺序执行。例如，在 dragstart 事件中记录拖拽元素的信息，在 drop 事件中更新元素的位置。
3. 更新 UI ：根据拖拽结果更新 UI，让用户看到直观的反馈。例如，将拖拽的元素移动到新的位置。

import { fromEvent } from 'rxjs';
import { concatMap } from 'rxjs/operators';

const dragElement = document.getElementById('drag-element');
const dropZone = document.getElementById('drop-zone');

const dragStart$ = fromEvent(dragElement, 'dragstart');
const dragOver$ = fromEvent(dropZone, 'dragover');
const drop$ = fromEvent(dropZone, 'drop');

dragStart$.pipe(
    concatMap(() => dragOver$.pipe(
        concatMap(() => drop$.pipe(
            // 处理 drop 事件
        ))
    ))
).subscribe(() => {
    // 更新 UI
});

6.3 搜索流重构

在增强虚拟现实应用中，对搜索流进行重构以提高可测试性是很有必要的。可以采用以下方法：
1. 使用弹珠图 ：弹珠图是一种可视化表示可观察对象的工具，可以帮助我们更好地理解和测试搜索流。通过绘制弹珠图，我们可以清晰地看到事件的发生顺序和时间间隔。
2. 虚拟时间调度器 ：使用虚拟时间调度器可以模拟时间的流逝，从而在测试中更方便地控制搜索流的执行。例如，在测试搜索功能时，可以快速模拟不同时间点的搜索请求。
3. 重构搜索流 ：根据弹珠图和虚拟时间调度器的结果，对搜索流进行重构，使其更易于测试和维护。例如，将搜索逻辑拆分成多个独立的函数，每个函数负责一个特定的任务。

7. 性能优化与注意事项

7.1 资源分配

在使用 RxJS 时，资源分配是一个需要注意的问题。有两种常见的资源分配方式：
- 急切分配 ：在创建观察对象时立即分配资源。这种方式的缺点是可能会导致资源的浪费，尤其是在观察对象被取消或不再需要时。
- 延迟分配 ：在需要时才分配资源。这种方式可以减少资源的浪费，提高性能。例如，在使用 defer 操作符时，只有在订阅观察对象时才会创建资源。

import { defer } from 'rxjs';

const lazyObservable = defer(() => {
    // 这里进行资源的分配
    return new Observable(subscriber => {
        // 处理逻辑
    });
});

7.2 流的取消

在某些情况下，需要取消流的执行。可以通过以下方式实现：
- 显式取消订阅 ：使用 unsubscribe() 方法显式地取消订阅观察对象。例如，在组件销毁时，取消对观察对象的订阅，防止内存泄漏。
- 处理取消不匹配问题 ：在 RxJS 和其他 API 之间可能存在取消不匹配的问题。例如，当使用 RxJS 发起 AJAX 请求时，需要确保在取消订阅时能够正确取消 AJAX 请求。

7.3 错误处理

错误处理是保证应用程序稳定性的关键。在 RxJS 中，可以采用以下错误处理策略：
- 捕获错误 ：使用 catch 操作符捕获观察对象中的错误，并进行相应的处理。例如，当 AJAX 请求失败时，捕获错误并显示错误信息。
- 重试机制 ：使用 retry 和 retryWhen 操作符实现重试机制。例如，当网络请求失败时，可以重试一定次数，提高请求的成功率。
- 最终处理 ：使用 finally 操作符在观察对象完成或出错时执行最终的处理逻辑。例如，在请求完成后，关闭加载提示框。

8. 总结与展望

通过对 RxJS 的学习和实践，我们了解了其丰富的功能和强大的应用场景。从数据处理到业务流程协调，从异步编程到错误处理，RxJS 都提供了有效的解决方案。在实际项目中，我们应该根据具体需求合理选择操作符和库，遵循最佳实践，不断优化代码，提高应用程序的性能和可维护性。

未来，随着技术的不断发展，RxJS 可能会在更多的领域得到应用。例如，在人工智能、物联网等领域，RxJS 的异步处理和事件驱动的特性可以帮助我们更好地处理复杂的数据和事件。同时，RxJS 社区也在不断发展壮大，会有更多的优秀工具和插件出现，为我们的开发工作提供更多的便利。我们应该持续关注 RxJS 的发展动态，不断学习和探索，将其应用到更多的项目中。