RxJS 操作符和扁平化操作符是什么？

Question

RxJS 操作符和扁平化操作符是什么？

Accepted Answer

**RxJS operators** 转换、过滤和组合 Observable 流。最重要的——也是最容易混淆的——是四个**扁平化操作符**，它们处理 Observables-of-Observables（例如由另一个流的每次发射触发的 HTTP 调用）。

## 常见的 transformation/filter 操作符

```ts
import { map, filter, tap, debounceTime, distinctUntilChanged, catchError } from "rxjs/operators";

source$.pipe(
  map(x => x * 2),                 // transform each value
  filter(x => x > 10),             // keep values passing a test
  tap(x => console.log(x)),        // side effect, doesn't change the stream
  debounceTime(300),               // wait for a pause before emitting (search inputs)
  distinctUntilChanged(),          // ignore consecutive duplicates
);
```

## 四个扁平化操作符（棘手的部分）

当源中的每个值都需要触发**另一个** Observable（如 HTTP 请求）时，您必须「扁平化」内部 Observable。这四个操作符在**处理重叠**的方式上有所不同：

```text
switchMap   → cancels the previous inner Observable when a new value arrives
mergeMap    → runs all inner Observables concurrently (no cancellation)
concatMap   → queues them, runs one at a time in order
exhaustMap  → ignores new values while an inner Observable is still running
```

## 何时使用每个操作符

```ts
// switchMap — type-ahead search: cancel the stale request when the user types again
this.searchInput.valueChanges.pipe(
  debounceTime(300),
  switchMap(query => this.api.search(query)) // only the LATEST query's result matters
).subscribe(results => this.results = results);

// mergeMap — fire independent requests in parallel (order doesn't matter)
from(ids).pipe(mergeMap(id => this.api.get(id)));

// concatMap — operations that MUST run in order (e.g. sequential saves)
actions$.pipe(concatMap(action => this.api.save(action)));

// exhaustMap — ignore repeated clicks while a login is in flight
this.loginClick$.pipe(exhaustMap(() => this.auth.login())); // ignore spam clicks
```

## 一个记忆法

```text
switchMap  = "switch to the new one" (cancel old) → search
mergeMap   = "merge all" (parallel)              → independent requests
concatMap  = "concatenate" (sequential)          → ordered operations
exhaustMap = "exhaust current first" (ignore new) → prevent double-submit
```

## 为什么这很重要

扁平化操作符是最重要的——也是最常被误用的—— RxJS 工具，特别是在 Angular 中。

选择错误会导致真实的 bug：对搜索使用 `mergeMap` 会显示过期的结果（无取消）；对顺序保存使用 `switchMap` 会在中途取消它们。

了解 `switchMap` 会取消（适合搜索）、`concatMap` 维持顺序、`mergeMap` 并行处理、`exhaustMap` 阻止重复，对于任何 RxJS 繁重的 Angular 代码中的正确异步处理至关重要。