RxJS 入门

Angular 深度集成 RxJS：HttpClient、Router 事件、表单 valueChanges 均返回 Observable。这是 Angular 与 React 核心 / Vue 3 核心 最大差异之一——读企业 Angular 代码必须懂基础操作符。

学习目标

• 理解 Observable 与 Promise 的区别
• 使用 pipe、map、filter、switchMap
• 在模板用 async 管道订阅

核心内容

Observable 基础

import { of, interval } from "rxjs";
import { map, take, filter } from "rxjs/operators";

of(1, 2, 3).pipe(map((n) => n * 10), filter((n) => n > 15)).subscribe(console.log);

Observable 可多值、可取消；Promise 只 resolve 一次。常用操作符：map、filter、switchMap、catchError、debounceTime。

HttpClient 链式

searchTracks(keyword: string) {
  return this.http.get<Track[]>("/api/tracks").pipe(
    map((list) => list.filter((t) => t.title.includes(keyword))),
    catchError(() => of([])),
  );
}

switchMap 防竞态

this.route.paramMap.pipe(
  switchMap((params) => this.trackService.getBySlug(params.get("slug")!)),
).subscribe((track) => (this.track = track));

快速切换路由时，switchMap 取消上一次未完成的 HTTP。

async 管道

@Component({
  template: `
    @if (tracks$ | async; as tracks) {
      <ul>
        @for (t of tracks; track t.slug) {
          <li>{{ t.title }}</li>
        }
      </ul>
    }
  `,
})
export class TrackListComponent {
  tracks$ = inject(TrackService).list();
}

模板订阅，组件销毁时自动 unsubscribe。Signals 正在简化部分场景，存量项目 RxJS 仍无处不在。

练习

• 搜索框 debounceTime(300) + switchMap 调 API
• 用 async 管道替换手动 subscribe

小结

Observable + pipe 是 Angular 异步 lingua franca。 下一课 Signals。