RxJS 高阶映射操作符详解：map、mergeMap 和 switchMap

1. map 操作符

map 是最基本的转换操作符，用于对 Observable 发出的每个值进行一对一转换。

基本特点：

同步操作
一对一转换
不改变 Observable 的发出时机

详细示例：

javascript 复制代码

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

// 示例1：简单数值转换
of(1, 2, 3).pipe(
  map(x => x * 2)
).subscribe(result => console.log(result));
// 输出: 2, 4, 6

// 示例2：对象属性转换
const users = of(
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 }
);

users.pipe(
  map(user => ({
    ...user,
    name: user.name.toUpperCase(),
    isAdult: user.age >= 18
  }))
).subscribe(console.log);
/* 输出:
{id: 1, name: "ALICE", age: 25, isAdult: true}
{id: 2, name: "BOB", age: 30, isAdult: true}
*/

// 示例3：API响应处理
import { from } from 'rxjs';

function fetchUser(userId) {
  return from(
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(response => response.json())
  );
}

fetchUser(1).pipe(
  map(user => user.name)
).subscribe(name => console.log('用户名:', name));
// 输出: 用户名: Leanne Graham

2. mergeMap (flatMap) 操作符

mergeMap 用于将一个值映射成一个新的 Observable，并同时订阅所有这些内部 Observable，合并它们的输出。

基本特点：

一对多转换
同时维护多个内部订阅
不取消之前的订阅
适合并行处理

详细示例：

javascript 复制代码

import { of, interval } from 'rxjs';
import { mergeMap, take } from 'rxjs/operators';

// 示例1：将每个值转换为新的Observable
of('a', 'b', 'c').pipe(
  mergeMap(letter => 
    interval(1000).pipe(
      take(3),
      map(i => letter + i)
    )
  )
).subscribe(console.log);
/* 输出 (每秒一个):
a0
b0
c0
a1
b1
c1
a2
b2
c2
*/

// 示例2：实际API请求
function fetchPosts(userId) {
  return from(
    fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
      .then(response => response.json())
  );
}

of(1, 2, 3).pipe(
  mergeMap(userId => fetchPosts(userId))
).subscribe(posts => {
  console.log(`用户${posts[0]?.userId}的帖子数:`, posts.length);
});
/* 输出:
用户1的帖子数: 10
用户2的帖子数: 10
用户3的帖子数: 10
*/

// 示例3：结合Promise使用
function uploadFile(file) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`文件${file.name}上传成功`);
    }, 1000);
  });
}

const files = of(
  { name: 'document.pdf' },
  { name: 'image.jpg' }
);

files.pipe(
  mergeMap(file => from(uploadFile(file)))
).subscribe(result => console.log(result));
/* 输出 (大约同时):
文件document.pdf上传成功
文件image.jpg上传成功
*/

3. switchMap 操作符

switchMap 会在每次发出新值时取消之前的内部 Observable 订阅，并订阅新的 Observable。

基本特点：

一对多转换
只保留最新的内部订阅
自动取消之前的订阅
适合搜索输入等场景

详细示例：

javascript 复制代码

import { fromEvent, interval } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';

// 示例1：基础用法
fromEvent(document.getElementById('searchInput'), 'input').pipe(
  switchMap(event => {
    const query = event.target.value;
    return from(
      fetch(`https://api.example.com/search?q=${query}`)
        .then(res => res.json())
    );
  })
).subscribe(results => {
  console.log('搜索结果:', results);
});

// 示例2：与interval结合
const source$ = of('start').pipe(
  switchMap(() => interval(1000).pipe(
    take(5),
    map(i => `值 ${i}`)
  ))
);

source$.subscribe(console.log);
/* 输出 (每秒一个):
值 0
值 1
值 2
值 3
值 4
*/

// 示例3：实际应用 - 取消之前的请求
function searchBooks(query) {
  return from(
    fetch(`https://openlibrary.org/search.json?q=${query}`)
      .then(res => res.json())
  );
}

const searchInput = document.getElementById('bookSearch');
fromEvent(searchInput, 'input').pipe(
  map(event => event.target.value),
  filter(query => query.length > 2), // 至少3个字符才搜索
  debounceTime(300), // 防抖300ms
  distinctUntilChanged(), // 值变化才继续
  switchMap(query => searchBooks(query))
).subscribe(results => {
  console.log('找到书籍:', results.docs);
});

4. tap 操作符

tap 用于在 Observable 流中执行副作用操作，不影响数据流。

基本特点：

用于调试、日志记录
执行副作用但不修改数据
不影响原始流

详细示例：

javascript 复制代码

import { of } from 'rxjs';
import { tap, map } from 'rxjs/operators';

// 示例1：基本调试
of(1, 2, 3).pipe(
  tap(value => console.log('收到原始值:', value)),
  map(x => x * 2),
  tap(value => console.log('转换后的值:', value))
).subscribe();
/* 输出:
收到原始值: 1
转换后的值: 2
收到原始值: 2
转换后的值: 4
收到原始值: 3
转换后的值: 6
*/

// 示例2：实际应用 - 记录API请求
function getUser(userId) {
  return from(
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
  ).pipe(
    tap(response => {
      console.log(`请求用户${userId}的状态:`, response.status);
      if (!response.ok) {
        throw new Error('请求失败');
      }
    }),
    switchMap(response => from(response.json()))
  );
}

getUser(1).pipe(
  tap(user => {
    console.log('成功获取用户:', user.name);
    // 可以在这里更新UI状态
    document.getElementById('loading').style.display = 'none';
  }),
  catchError(error => {
    console.error('获取用户失败:', error);
    return of(null);
  })
).subscribe();

// 示例3：状态管理
let requestCount = 0;

function fetchData() {
  return from(fetch('/api/data')).pipe(
    tap(() => {
      requestCount++;
      console.log(`当前请求数: ${requestCount}`);
      document.getElementById('spinner').style.display = 'block';
    }),
    switchMap(response => response.json()),
    tap(() => {
      document.getElementById('spinner').style.display = 'none';
    })
  );
}

综合对比示例

javascript 复制代码

import { of, fromEvent } from 'rxjs';
import { map, mergeMap, switchMap, tap, delay } from 'rxjs/operators';

// 模拟API函数
function simulateApi(id, delayTime) {
  return of(`结果 ${id}`).pipe(delay(delayTime));
}

// 对比mergeMap和switchMap
const button = document.getElementById('myButton');

fromEvent(button, 'click').pipe(
  map((_, index) => index + 1), // 点击次数
  tap(count => console.log(`点击 #${count}`)),
  // 尝试切换这两个操作符查看区别
  // mergeMap(count => simulateApi(count, 1000))
  switchMap(count => simulateApi(count, 1000))
).subscribe(result => console.log('收到:', result));

/* 
使用mergeMap时的可能输出:
点击 #1
点击 #2
点击 #3
收到: 结果 1
收到: 结果 2
收到: 结果 3

使用switchMap时的可能输出:
点击 #1
点击 #2 (在1秒内点击)
点击 #3 (在1秒内点击)
收到: 结果 3 (只收到最后一个结果)
*/

实际应用场景总结

map：
- 简单数据转换
- 提取对象属性
- 格式化数据
mergeMap：
- 并行处理多个请求
- 文件上传
- 需要保留所有内部订阅的场景
switchMap：
- 搜索输入自动完成
- 取消之前的HTTP请求
- 路由导航
tap：
- 调试和日志记录
- 执行UI更新等副作用
- 监控状态变化

记住选择操作符的关键：

是否需要并行处理？→ mergeMap
是否需要取消之前的请求？→ switchMap
是否需要简单转换？→ map
是否需要执行副作用？→ tap

在 RxJS 的 pipe 中，操作符的执行顺序是从上到下、从左到右的线性执行流程。让我们通过你提到的 map、tap 和 switchMap 组合来分析它们的执行顺序。

基本执行顺序规则

数据流经 pipe 的顺序：从第一个操作符开始，依次传递给后续操作符
同步操作符 （如 map、tap）：立即执行
异步/高阶操作符 （如 switchMap）：会创建新的 Observable
每个操作符都会接收上一个操作符的输出

典型组合示例分析

javascript 复制代码

import { fromEvent } from 'rxjs';
import { map, tap, switchMap } from 'rxjs/operators';

fromEvent(document.getElementById('searchInput'), 'input').pipe(
  tap(event => console.log('1. 原始事件:', event)),        // 第1步
  map(event => event.target.value),                      // 第2步
  tap(value => console.log('2. 提取的值:', value)),      // 第3步
  switchMap(query => fetch(`/api/search?q=${query}`))    // 第4步
).subscribe(response => {
  console.log('5. 最终结果:', response);                 // 第5步
});

详细执行流程

假设用户在搜索输入框中输入 "rxjs"：

tap(event => console.log('1. 原始事件:', event))
- 最先执行
- 打印原始的 input 事件对象
- 不影响数据流，将原样传递事件对象
map(event => event.target.value)
- 从事件对象中提取输入框的值
- 将 event 转换为字符串值（如 "rxjs"）
tap(value => console.log('2. 提取的值:', value))
- 打印提取后的值
- 不影响数据流，原样传递值
switchMap(query => fetch(/api/search?q=${query}))
- 高阶操作，会做以下事情：
  a. 取消之前可能未完成的 fetch 请求（如果是连续输入）
  b. 发起新的 fetch 请求
  c. 将 Promise 转换为 Observable
- 等待 API 响应
subscribe 回调
- 最后执行
- 收到 fetch 的响应对象

可视化执行顺序

复制代码

输入事件 → tap(记录原始事件) → map(提取值) → tap(记录值) → switchMap(发起请求) → 订阅接收响应

关键注意事项

switchMap 的特殊行为：
- 当新值到达时，会取消前一个内部 Observable
- 这意味着如果用户快速连续输入，只有最后一次请求会被处理

tap 的位置影响：

javascript 复制代码

// 示例1：tap在switchMap之前
.pipe(
  tap(x => console.log('before switchMap', x)),
  switchMap(x => fetchData(x))
)

// 示例2：tap在switchMap之后
.pipe(
  switchMap(x => fetchData(x)),
  tap(x => console.log('after switchMap', x))
)

示例1的 tap 记录的是 switchMap 前的值
示例2的 tap 记录的是 API 返回的数据

错误处理：
- 如果 switchMap 内部的 Observable 出错，错误会跳过后续操作符直接到达 subscribe 的 error 回调

实际场景执行示例

假设我们有一个搜索框，用户依次输入：r → rx → rxj → rxjs

javascript 复制代码

fromEvent(searchInput, 'input').pipe(
  debounceTime(300),
  map(event => event.target.value),
  tap(query => console.log(`正在处理查询: ${query}`)),
  switchMap(query => 
    from(fetch(`/api/search?q=${query}`).then(res => res.json()))
).subscribe({
  next: results => console.log('搜索结果:', results),
  error: err => console.error('搜索失败:', err)
});

可能的执行过程：

用户输入 'r' → 300ms 没有新输入 → 触发搜索
- tap: "正在处理查询: r"
- switchMap: 发起搜索 "r" 的请求
用户在 300ms 内继续输入 'rx' → 取消 'r' 的请求
- tap: "正在处理查询: rx"
- switchMap: 发起搜索 "rx" 的请求
用户继续快速输入 'rxj' → 取消 'rx' 的请求
- tap: "正在处理查询: rxj"
- switchMap: 发起搜索 "rxj" 的请求
用户最后输入 'rxjs' 并停止 300ms → 取消 'rxj' 的请求
- tap: "正在处理查询: rxjs"
- switchMap: 发起搜索 "rxjs" 的请求
- 最终只有 "rxjs" 的搜索结果会到达 subscribe

总结执行顺序要点

线性流水线处理：数据像水流一样依次通过每个操作符
同步操作符立即执行：map 和 tap 会立即对每个值进行处理
switchMap 是异步边界：它会开启一个新的异步上下文
订阅只看到最终结果：subscribe 收到的是经过整个管道处理后的结果
错误会跳过后续步骤：任何操作符出错都会直接跳到错误处理