RxJS 实战博客系列
本系列博客基于 RxJS 实战项目，深入讲解 13 个核心场景的实现方案。
博客列表
基础操作符篇
-
- 使用
expand操作符实现链式递归请求 - 自动加载多页数据
- 分页数据的递归处理
- 使用
-
Chapter 2: forkJoin vs concatMap
- 并行请求 vs 串行请求
forkJoin和concatMap的对比- 不同场景下的选择策略
-
- 使用
mergeMap实现并发请求 - 实时处理每个请求的结果
- 并发数控制和错误处理
- 使用
竞态条件处理篇
-
- 使用
switchMap处理请求竞态条件 - 自动取消之前的请求
- 快速点击场景的处理
- 使用
-
- 标签页切换时的请求取消
- 确保只显示当前标签页的数据
- 组件销毁时的清理
性能优化篇
-
debounceTime和throttleTime的应用- 搜索输入框的防抖处理
- 滚动事件的节流处理
-
Chapter 7: shareReplay Token 刷新
- 使用
shareReplay实现 Token 刷新的并发控制 - 多个请求共享同一个 Token 刷新请求
- 避免重复请求
- 使用
错误处理与重试篇
- Chapter 8: retryWhen 失败重试
- 使用
retryWhen实现灵活的重试机制 - 延迟重试和重试次数限制
- 指数退避策略
- 使用
轮询与实时通信篇
-
- 使用
exhaustMap实现轮询机制 - 避免请求堆积
- 定期检查数据更新
- 使用
-
- 大文件分片上传
- 断点续传功能
- 进度显示和并发控制
-
- WebSocket 连接管理
- 使用
throttleTime实现消息节流 - 自动重连机制
交互优化篇
- Chapter 12: 弹幕系统
- 使用
throttleTime实现弹幕系统 - 点击事件的节流处理
- 弹幕动画和自动清理
- 使用
时间处理篇
- Chapter 13: 定时器
- 使用
interval和scan实现定时器 - 开始、暂停、重置功能
- 时间格式化和显示
- 使用
核心操作符速查
| 操作符 | 用途 | 适用场景 |
|---|---|---|
expand | 递归展开 | 链式递归请求 |
forkJoin | 并行等待 | 等待所有请求完成 |
mergeMap | 并发映射 | 并发执行多个请求 |
switchMap | 切换映射 | 取消之前的请求 |
concatMap | 顺序映射 | 按顺序执行请求 |
exhaustMap | 忽略映射 | 避免请求堆积（轮询） |
debounceTime | 防抖 | 等待用户完成操作 |
throttleTime | 节流 | 限制事件触发频率 |
shareReplay | 共享重放 | 多个订阅者共享结果 |
retryWhen | 条件重试 | 灵活的重试机制 |
interval | 间隔发出 | 定时器、轮询 |
scan | 累加扫描 | 累加计算、状态管理 |
startWith | 初始值 | 提供初始值 |
takeUntil | 条件完成 | 控制 Observable 完成 |
学习路径建议
初学者路径
- Chapter 1: expand 递归请求
- Chapter 2: forkJoin vs concatMap（理解并行和串行）
- Chapter 3: mergeMap 并发请求（理解并发）
- Chapter 6: 防抖与节流（性能优化基础）
进阶路径
- Chapter 4: switchMap 竞态条件（处理复杂场景）
- Chapter 5: switchMap 标签页切换
- Chapter 7: shareReplay Token 刷新（高级并发控制）
- Chapter 8: retryWhen 失败重试（错误处理）
实战路径
- Chapter 9: exhaustMap 轮询（实际应用）
- Chapter 10: 分片上传（复杂场景）
- Chapter 11: WebSocket 消息节流（实时通信）
- Chapter 12: 弹幕系统
- Chapter 13: 定时器（时间处理）
项目结构
rxjs-example/
├── front-end/ # Angular 前端项目
│ └── src/app/chapters/
│ ├── chapter1/ # expand 递归请求
│ ├── chapter2/ # forkJoin vs concatMap
│ ├── chapter3/ # mergeMap 并发请求
│ ├── chapter4/ # switchMap 竞态条件
│ ├── chapter5/ # switchMap 标签页切换
│ ├── chapter6/ # 防抖与节流
│ ├── chapter7/ # shareReplay Token 刷新
│ ├── chapter8/ # retryWhen 失败重试
│ ├── chapter9/ # exhaustMap 轮询
│ ├── chapter10/ # 分片上传
│ ├── chapter11/ # WebSocket 消息节流
│ ├── chapter12/ # 弹幕系统
│ └── chapter13/ # 定时器
├── back-end/ # Node.js 后端项目
│ └── server.js # 提供各种 API 接口
└── blogs/ # 博客文章
├── README.md
├── chapter1-expand-递归请求.md
├── chapter2-forkJoin-vs-concatMap.md
├── chapter3-mergeMap-并发请求.md
├── chapter4-switchMap-竞态条件.md
├── chapter5-switchMap-标签页切换.md
├── chapter6-debounce-throttle.md
├── chapter7-shareReplay-token刷新.md
├── chapter8-retryWhen-失败重试.md
├── chapter9-exhaustMap-轮询.md
├── chapter10-分片上传.md
├── chapter11-WebSocket-消息节流.md
├── chapter12-弹幕系统.md
└── chapter13-定时器.md
运行项目
启动后端服务
cd back-end
npm install
node server.js
后端服务将在 http://localhost:8080 启动。
启动前端项目
cd front-end
npm install
ng serve
前端项目将在 http://localhost:4200 启动。
贡献
欢迎提交 Issue 和 Pull Request！
许可证
MIT License
