RxJS 中的组合操作符的详解

在 RxJS 中，组合操作符（Combination operators）是一类用于合并多个 Observable 的 API。通过组合操作符，我们可以将多个 Observable 合并为一个新的 Observable，从而在前端开发中实现更加复杂和丰富的交互效果。在本篇文章中，我们将探讨 RxJS 中的组合操作符的详细应用。

concat 操作符

concat 操作符是 RxJS 中最简单的组合操作符。它简单地将多个 Observable 连接在一起，形成一个按顺序依次执行的序列。例如：

const source1 = of(1, 2, 3);
const source2 = of(4, 5, 6);
const source3 = of(7, 8, 9);

const result = concat(source1, source2, source3);

result.subscribe(console.log);
// output: 1, 2, 3, 4, 5, 6, 7, 8, 9

在上面的示例中，我们分别创建了三个 Observable，分别代表了数值 1 到 9。然后我们使用 concat 操作符将这三个 Observable 连接在一起，形成了按顺序依次执行的序列。最终通过 result.subscribe() 方法对这个新的 Observable 进行订阅，执行之后我们可以看到输出结果为 1, 2, 3, 4, 5, 6, 7, 8, 9。

merge 操作符

merge 操作符可以将多个 Observable 合并到一起，以创建一个新的 Observable。当任何一个原始 Observable 发出数据时，这个新的 Observable 也会发出相同的数据。例如：

const source1 = interval(1000).pipe(mapTo('source1'));
const source2 = interval(2000).pipe(mapTo('source2'));

const result = merge(source1, source2);

result.subscribe(console.log);
// output: source1, source2, source1, source1, source2, source1, ...

在上面的示例中，我们分别创建了两个 Observable，source1 和 source2。source1 每隔 1s 会发出一个值 "source1"，source2 每隔 2s 会发出一个值 "source2"。然后我们使用 merge 操作符将这两个 Observable 合并到一起，形成一个新的 Observable。当任何一个原始 Observable 发出数据时，这个新的 Observable 也会发出相同的数据。最终通过 result.subscribe() 方法对这个新的 Observable 进行订阅，执行之后我们可以看到输出结果为 source1, source2, source1, source1, source2, source1, ...。

concatMap 操作符

concatMap 操作符可以将每个源 Observable 值映射为它所发射的 Observable，然后将这些 Observable 拼接成一个单独的 Observable。例如：

const source = of(1, 2, 3);

const result = source.pipe(
  concatMap(val => of(val * 2))
);

result.subscribe(console.log);
// output: 2, 4, 6

在上面的示例中，我们使用 of 操作符创建了一个 Observable，发出数值 1，2，3。然后我们使用 concatMap 操作符将这个 Observable 中的每个值乘以 2，并返回一个新的 Observable。最终通过 result.subscribe() 方法对这个新的 Observable 进行订阅，执行之后我们可以看到输出结果为 2, 4, 6。

mergeMap 操作符

mergeMap 操作符可以将每个源 Observable 映射为它所发射的 Observable，并将这些 Observable 合并成一个 Observable。例如：

const source = of('apple', 'orange', 'banana');

const result = source.pipe(
  mergeMap(val => ajax(`https://api.example.com/search?q=${val}`))
);

result.subscribe(console.log);
// output: {response data}, {response data}, ...

在上面的示例中，我们使用 of 操作符创建了一个 Observable，发出字符串 "apple"，"orange"，"banana"。然后我们使用 mergeMap 操作符将这个 Observable 中的每个字符串拼接到一个 URL 中，并使用 ajax 发起请求，返回一个新的 Observable。最终通过 result.subscribe() 方法对这个新的 Observable 进行订阅，执行之后我们可以看到输出结果为每个请求返回的响应结果。

switchMap 操作符

switchMap 操作符可以将每个源 Observable 映射为它所发射的 Observable，然后只发出最近一次映射的 Observable 所发出的值。例如：

const source = buttonClicks$.pipe(
  switchMap(() => ajax('https://api.example.com'))
);

source.subscribe(console.log);
// output: {response data}

在上面的示例中，我们使用 switchMap 将 buttonClicks$ Observable 中的每个点击事件映射为一个 ajax 请求。然后我们只会发出最近一次映射的 Observable 所发出的值。最终通过 source.subscribe() 方法对这个新的 Observable 进行订阅，执行之后我们可以看到输出结果为最近一次请求返回的响应结果。

总结

通过本篇文章的讲解，我们对 RxJS 中的组合操作符有了更深入和详细的理解。在实际的前端开发中，灵活掌握这些组合操作符可以帮助我们更好地管理和组合多个 Observable，实现更加丰富和复杂的交互效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6821a48841e98943254fa