Skip to content

Commit

Permalink
doc: add rxjs.md cheat sheet (jaywcjlove#674)
Browse files Browse the repository at this point in the history
Create a new cheat sheet for RxJS covering key concepts, operators, and methods. This includes installation, importing, creating Observables, and using various operators such as map, filter, switchMap, and more. The document also explains important concepts like Schedulers and provides examples for better understanding.
  • Loading branch information
h7ml authored Jun 25, 2024
1 parent 942f2c9 commit 1013713
Showing 1 changed file with 298 additions and 0 deletions.
298 changes: 298 additions & 0 deletions docs/rxjs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,298 @@
RxJS 备忘清单
===

RxJS(Reactive Extensions for JavaScript)是一个强大的库,用于处理异步事件和数据流。以下是 RxJS 的一些关键概念、操作符和方法的总结。

## 入门

### 安装 RxJS

```bash
npm install rxjs
```

### 导入所需的 Observable 和操作符

```javascript
import { Observable, of, from, interval, fromEvent } from 'rxjs';
import {
map,
filter,
switchMap,
mergeMap,
catchError,
debounceTime,
distinctUntilChanged,
take,
tap,
concatMap,
delay,
retryWhen,
scan,
combineLatest,
concat,
merge,
forkJoin,
withLatestFrom,
startWith,
reduce
} from 'rxjs/operators';
```

## 创建 Observable

### of - 创建一个立即发送指定值并完成的 Observable

```javascript
const obs = of(1, 2, 3);
obs.subscribe(console.log);
// 输出: 1 2 3
```

### from - 从 Promise、数组、可迭代对象创建 Observable

```javascript
const obs = from([1, 2, 3]);
obs.subscribe(console.log);
// 输出: 1 2 3
```

### interval - 创建一个定时发送递增整数的 Observable

```javascript
const obs = interval(1000);
obs.subscribe(console.log);
// 每秒输出一次递增的数字
```

### fromEvent - 从 DOM 事件创建 Observable

```javascript
const button = document.querySelector('button');
const obs = fromEvent(button, 'click');
obs.subscribe(event => console.log('Button clicked!', event));
```

## 操作符

### map - 对 Observable 发出的每个值应用一个函数

```javascript
const obs = of(1, 2, 3).pipe(
map(x => x * 2)
);
obs.subscribe(console.log);
// 输出: 2 4 6
```

### filter - 过滤 Observable 发出的值

```javascript
const obs = of(1, 2, 3).pipe(
filter(x => x % 2 === 0)
);
obs.subscribe(console.log);
// 输出: 2
```

### switchMap - 将 Observable 每个值映射成 Observable 并订阅,前一个订阅将被取消

```javascript
const obs = interval(1000).pipe(
switchMap(() => of('Hello'))
);
obs.subscribe(console.log);
// 每秒输出一次 "Hello"
```

### mergeMap - 类似 switchMap,但允许多个内部 Observable 并发执行

```javascript
const obs = interval(1000).pipe(
mergeMap(() => of('Hello'))
);
obs.subscribe(console.log);
// 每秒输出一次 "Hello"
```

### catchError - 捕获 Observable 链中的错误

```javascript
const obs = of(1, 2, 3).pipe(
map(x => {
if (x === 2) throw 'Error!';
return x;
}),
catchError(err => of('Caught an error: ' + err))
);
obs.subscribe(console.log);
// 输出: 1 Caught an error: Error!
```

### debounceTime - 延迟处理,直到源 Observable 停止发出数据一定时间

```javascript
const obs = fromEvent(document, 'mousemove').pipe(
debounceTime(300)
);
obs.subscribe(event => console.log('Mouse moved!', event));
```

### distinctUntilChanged - 忽略连续重复的值

```javascript
const obs = of(1, 1, 2, 2, 3, 3).pipe(
distinctUntilChanged()
);
obs.subscribe(console.log);
// 输出: 1 2 3
```

### take - 只发出前 n 个值

```javascript
const obs = interval(1000).pipe(
take(3)
);
obs.subscribe(console.log);
// 输出: 0 1 2
```

## 组合操作符

### combineLatest - 当两个 Observable 都发出新的值时,发出它们的组合

```javascript
const obs1 = interval(1000);
const obs2 = of('A', 'B', 'C');
const combined = combineLatest([obs1, obs2]);
combined.subscribe(console.log);
// 每秒输出一次两个 observables 的最新值
```

### concat - 按顺序连接多个 Observable

```javascript
const obs1 = of(1, 2, 3);
const obs2 = of(4, 5, 6);
const combined = concat(obs1, obs2);
combined.subscribe(console.log);
// 输出: 1 2 3 4 5 6
```

### merge - 将多个 Observable 合并为一个

```javascript
const obs1 = interval(1000).pipe(map(x => 'A' + x));
const obs2 = interval(500).pipe(map(x => 'B' + x));
const combined = merge(obs1, obs2);
combined.subscribe(console.log);
// 每秒输出 "A" 和 "B" 开头的递增数字
```

### forkJoin - 等待所有 Observable 完成,然后发出它们的最后一个值的数组

```javascript
const obs1 = of(1, 2, 3);
const obs2 = of('A', 'B', 'C');
const combined = forkJoin([obs1, obs2]);
combined.subscribe(console.log);
// 输出: [3, 'C']
```

## 错误处理

### retryWhen - 在 Observable 发出错误时重试

```javascript
const obs = throwError('Something went wrong!').pipe(
retryWhen(errors =>
errors.pipe(
delayWhen(() => interval(1000))
)
)
);
obs.subscribe(console.log, console.error);
// 输出: Something went wrong! (每秒重试一次)
```

## 实用操作符

### tap - 用于记录、测量或执行副作用操作

```javascript
const obs = of(1, 2, 3).pipe(
tap(x => console.log(`Before: ${x}`)),
map(x => x * 2),
tap(x => console.log(`After: ${x}`))
);
obs.subscribe();
// 输出: Before: 1, After: 2, Before: 2, After: 4, Before: 3, After: 6
```

### startWith - 在 Observable 序列前添加值

```javascript
const obs = of(1, 2, 3).pipe(
startWith(0)
);
obs.subscribe(console.log);
// 输出: 0 1 2 3
```

### scan - 对 Observable 发出的每个值应用累加器函数

```javascript
const obs = of(1, 2, 3).pipe(
scan((acc, value) => acc + value, 0)
);
obs.subscribe(console.log);
// 输出: 1 3 6
```

### reduce - 对 Observable 发出的值进行累加

```javascript
const obs = of(1, 2, 3).pipe(
reduce((acc, value) => acc + value, 0)
);
obs.subscribe(console.log);
// 输出: 6
```

### delay - 延迟 Observable 发出数据的时间

```javascript
const obs = of('Hello').pipe(
delay(2000)
);
obs.subscribe(console.log);
// 输出: 'Hello' (延迟2秒)
```

## 调度器

调度器(Scheduler)控制着 RxJS 操作的执行时机。常见的调度器有:

- `asyncScheduler`:异步执行任务。
- `queueScheduler`:按队列顺序执行任务。
- `animationFrameScheduler`:在浏览器的下一次重绘前执行任务。

### 示例

```javascript
const obs = of(1, 2, 3).pipe(
observeOn(asyncScheduler)
);

console.log('Before subscribe');
obs.subscribe(console.log);
console.log('After subscribe');
// 输出: Before subscribe, After subscribe, 1, 2, 3
```

## 另见

- [RxJS 官方文档](https://rxjs.dev/)
- [RxJS 学习资源](https://rxjs.dev/guide/overview)
- [RxJS 操作符参考](https://rxjs.dev/guide/operators)

0 comments on commit 1013713

Please sign in to comment.