mcpField
R
rxjs

rxjs

github.com/oguzhan18开发7214 次安装31 周前更新
代码仓库

关于 rxjs

面向 JavaScript 与 TypeScript 开发者的 RxJS 响应式编程技能，介绍 Observable、异步处理与常用实践。内容涉及 RxJS 8 API 变化、订阅清理及 Angular Signals 互操作。

主要功能

  1. 01RxJS 8 API 变化说明
  2. 02Observable 与异步处理实践
  3. 03扁平化操作符选择建议
  4. 04订阅清理与错误处理
  5. 05Signals 转换互操作

适用场景

  1. 01组合异步数据流
  2. 02实现可取消的搜索请求
  3. 03避免组件订阅造成内存泄漏
  4. 04在 Angular 中转换 Observable 与 Signal

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill rxjs

安装后在 Claude Code 中输入/rxjs确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

RxJS（JavaScript 响应式扩展）

版本： 8.x（2025） 标签： 响应式编程、可观察对象、异步

参考资料： 文档 — 操作符、API • Angular RxJS • GitHub

API 变更

本节介绍近期特定版本的 API 变更。

  • 新增：RxJS 8 — 更现代的 TypeScript 类型、更小的打包体积、更好的摇树优化 来源

  • 新增：改进的互操作辅助工具 — 使用 toSignal 和 toObservable 简化与 Signals 的相互转换

  • 新增：RxJS 8 易用性改进 — 更精简的操作符签名和更安全的默认值

  • 已弃用：旧版导入方式 — 请改用 RxJS 7+ 的管道式操作符，而非补丁式导入

最佳实践

  • 在模板中使用 AsyncPipe — 自动处理订阅和取消订阅，防止内存泄漏
@Component({
  template: `
    <div *ngIf="data$ | async as data">
      {{ data.name }}
    </div>
  `
})
export class MyComponent {
  data$ = this.service.getData();
}
  • 使用合适的扁平化操作符 — 根据使用场景选择：
// switchMap - cancel previous, keep latest (search)
search(term: string): Observable<SearchResult[]> {
  return this.searchService.search(term).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(term => term ? this.http.get(...) : of([]))
  );
}

// mergeMap - run concurrently (multiple API calls)
this.items$.pipe(
  mergeMap(item => this.save(item))
);

// concatMap - run sequentially (order matters)
this.orders$.pipe(
  concatMap(order => this.processOrder(order))
);

// exhaustMap - ignore while running (form submit)
this.submit$.pipe(
  exhaustMap(() => this.submitForm())
);
  • 始终取消订阅 — 防止内存泄漏
// Use takeUntil pattern
private destroy$ = new Subject<void>();

ngOnInit() {
  this.data$.pipe(takeUntil(this.destroy$)).subscribe();
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

// Or use takeUntilDestroyed (Angular 16+)
private destroy$ = takeUntilDestroyed();
  • 使用 catchError 处理错误
this.http.get('/api/data').pipe(
  catchError(error => {
    console.error(error);
    return of([]); // Return fallback value
  })
);
  • 使用 shareReplay(1) 缓存共享的可观察对象
this.data$ = this.http.get('/api/data').pipe(
  shareReplay(1)
);

  • 为可观察对象命名时添加 $ 后缀 — 提高可读性

  • 使用 Signals 管理 UI 状态，使用 RxJS 处理事件 — 现代 Angular 模式

// Convert Observable to Signal
users = toSignal(this.users$, { initialValue: [] });

// Convert Signal to Observable (if needed)
name$ = toObservable(this.name);

评论

支持 Markdown