RxJS 中的组合操作符：merge 和 concat

前言

RxJS 是一个强大的响应式编程库，它提供了许多操作符来处理数据流。其中，组合操作符是非常重要的一类，它们可以将多个 Observable 合并成一个，从而实现更复杂的逻辑。本文将介绍 RxJS 中的两个常用组合操作符：merge 和 concat。

merge

merge 操作符可以将多个 Observable 合并成一个，它的语法如下：

merge<T>(...observables: (ObservableInput<T> | SchedulerLike)[]): Observable<T>

其中，observables 是一个可变参数，可以传入多个 Observable。merge 操作符会将这些 Observable 中的数据流合并成一个，然后将合并后的数据流发射出去。

下面是一个示例代码，演示了如何使用 merge 操作符：

import { merge, of } from 'rxjs';

const obs1 = of(1, 2, 3);
const obs2 = of(4, 5, 6);
const obs3 = of(7, 8, 9);

const mergedObs = merge(obs1, obs2, obs3);

mergedObs.subscribe(value => console.log(value));

输出结果为：

1
4
7
2
5
8
3
6
9

可以看到，merge 操作符将三个 Observable 中的数据流合并成了一个，并按照时间顺序依次发射出去。

需要注意的是，merge 操作符不保证合并后的数据流顺序，也就是说，合并后的数据流可能会出现交错的情况。因此，在使用 merge 操作符时，需要特别注意数据流的顺序。

concat

concat 操作符也可以将多个 Observable 合并成一个，但它的合并方式与 merge 不同。concat 操作符会按照顺序依次连接 Observable，等待前一个 Observable 完成后再连接下一个 Observable。它的语法如下：

concat<T>(...observables: (ObservableInput<T> | SchedulerLike)[]): Observable<T>

下面是一个示例代码，演示了如何使用 concat 操作符：

import { concat, of } from 'rxjs';

const obs1 = of(1, 2, 3);
const obs2 = of(4, 5, 6);
const obs3 = of(7, 8, 9);

const concatObs = concat(obs1, obs2, obs3);

concatObs.subscribe(value => console.log(value));

输出结果为：

1
2
3
4
5
6
7
8
9

可以看到，concat 操作符按照顺序依次连接了三个 Observable，并依次发射出了它们的数据流。

需要注意的是，如果其中一个 Observable 没有完成，那么它后面的 Observable 将无法连接。因此，在使用 concat 操作符时，需要特别注意每个 Observable 的完成情况。

总结

merge 和 concat 是 RxJS 中常用的组合操作符，它们可以将多个 Observable 合并成一个，实现更复杂的逻辑。需要注意的是，merge 操作符不保证合并后的数据流顺序，而 concat 操作符按照顺序依次连接 Observable。在使用这两个操作符时，需要特别注意数据流的顺序和完成情况。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658d4ab7eb4cecbf2d33ef2a