用途
RxJS Patterns 是一套面向 Angular 应用的 RxJS 响应式编程模式指南,聚焦最佳实践、常见模式与性能优化。当需要有效创建和管理 Observable、链式组合 RxJS 操作符进行数据转换、处理响应式流中的错误、防止订阅造成内存泄漏、实现防抖/节流/缓冲、与多个订阅者共享 Observable、将 RxJS 与 Angular Signals 集成、优化响应式数据流,或实现重试、轮询、缓存等高级模式时,可参考本技能。
主要能力
核心操作符
- 转换:
map用于转换每个值;mergeMap/switchMap/concatMap/exhaustMap按并发需求选择——switchMap取消前一个(用于搜索),mergeMap并发执行(用于独立操作),concatMap顺序排队(用于有序操作),exhaustMap运行期间忽略新值(用于保存/提交)。 - 过滤:
filter只发出匹配值;distinctUntilChanged跳过连续重复值;take/takeUntil限制发出数量;debounceTime/throttleTime进行速率限制。 - 组合:
combineLatest任一 Observable 发出时发出;forkJoin全部完成时发出;merge合并多个 Observable;zip按索引配对发出。
错误处理
catchError:优雅处理错误,可返回回退值,或在记录后重新抛出。- 重试逻辑:
retry出错时重试;retryWhen配合scan与delay实现带延迟的高级重试。
内存管理
- 手动清理:使用
Subscription在ngOnDestroy中unsubscribe。 takeUntil模式:使用destroy$Subject 在销毁时取消订阅。toSignal(Angular 16+):自动管理订阅。
共享 Observable
使用 shareReplay({ bufferSize: 1, refCount: true }) 避免多个订阅者触发多次 HTTP 请求,复用缓存结果。
与 Angular Signals 集成
toSignal:将 Observable 转换为 signal,自动管理订阅,可在模板中使用。toObservable:将 signal 转换为 Observable,便于继续使用 RxJS 操作符链。
高级模式
- 轮询:
interval配合startWith、switchMap、takeUntil定时请求。 - 带过期缓存:使用
ReplaySubject与缓存时长判断,过期后重新请求。 - 乐观更新:先本地更新 UI,再发送请求,成功用服务器响应更新,失败回滚。
使用方式
本技能以代码示例形式提供模式参考,涵盖转换、过滤、组合操作符,错误处理,内存管理,共享,Signals 集成与高级模式。示例包括搜索(switchMap + debounceTime + distinctUntilChanged)、保存(exhaustMap)、订阅清理的三种写法对比、shareReplay 共享、toSignal/toObservable 互转、轮询、缓存与乐观更新等。
适用场景
适用于 Angular 应用中使用 RxJS 进行响应式编程的开发场景,尤其是需要处理异步数据流、搜索输入、表单提交、轮询状态、缓存数据、乐观更新,以及需要避免内存泄漏和重复请求的场合。
限制
资料未提供该技能的安装方式、运行环境要求、版本兼容范围、收费或价格信息,也未提供除代码示例外的具体使用步骤。部分内容(如 retryWhen、toSignal)依赖特定 RxJS 或 Angular 版本,资料中仅标注 toSignal 为 Angular 16+,其余版本要求暂未提供。