RxJS 响应式编程入门

RxJS（Reactive Extensions for JS/Angular核心依赖）：Observable冷(每次subscribe独立执行)/热(共享执行)、Subject(可多播)、pipe操作符（map/filter/mergeMap/switchMap/concatMap/exhaustMap/debounceTime/distinctUntilChanged/takeUntil）、S · 难度：入门 · +10XP

RxJS —— 响应式编程入门

RxJS（Reactive Extensions for JavaScript）把一切视为数据流（Stream）。用户点击是流、HTTP请求是流、定时器也是流。你可以对这些流进行map、filter、merge等操作。Angular深度集成了RxJS。

核心概念

import { Observable, fromEvent, interval } from 'rxjs';
import { map, filter, debounceTime, switchMap } from 'rxjs/operators';
// 从按钮点击事件创建流
const click$ = fromEvent(button, 'click');
click$.pipe(
  debounceTime(300), // 防抖300ms
  switchMap(() => fetch('/api/data')) // 转为HTTP请求流
).subscribe(data => console.log(data));
// 定时器流
interval(1000).pipe(
  map(i => i + 1), // 0,1,2... → 1,2,3...
  filter(i => i % 2 === 0) // 只保留偶数秒
).subscribe(console.log); // 2, 4, 6...

动手练习

1. 基础练习：用RxJS实现一个"点击计数器"——每次点击+1。
2. 进阶应用：做一个"实时搜索"——输入框输入→debounce→请求→显示结果。
3. 项目实战：在Angular项目中使用RxJS管理复杂异步状态。