在 RxJS 中，merge、concat、race、forkJoin 都是常用的操作符。虽然它们都可以用来合并多个 Observable，但它们的用法和效果是不同的。
merge
merge 可以将多个 Observable 合并成一个 Observable。当任意一个 Observable 发出一个值时，merge 就会把这个值发出来。
------ - ----- - ---- ------- ----- ----------- - ----- -- --- ----- ----------- - ----- -- --- ----- ---------------- - ------------------ ------------- ---------------------------------------- -- -- -- -- -- -- -
可以看到，mergedObservable 会依次发出 observable1 和 observable2 中的值。
concat
concat 可以将多个 Observable 合并成一个 Observable。不同于 merge，concat 会依次发出每个 Observable 的值，直到当前 Observable 完成后才会发出下一个 Observable 的值。
------ - ------ - ---- ------- ----- ----------- - ----- -- --- ----- ----------- - ----- -- --- ----- ---------------------- - ------------------- ------------- ---------------------------------------------- -- -- -- -- -- -- -
可以看到，concatenatedObservable 会先发出 observable1 中的值，然后再发出 observable2 中的值。
race
race 可以将多个 Observable 合并成一个 Observable。当任意一个 Observable 发出一个值时，race 就会停止其它 Observable 并把这个值发出来。
------ - ---- - ---- ------- ----- ----------- - ----- -- --------------------- ----- ----------- - ----- -- -------------------- ----- --------------- - ----------------- ------------- --------------------------------------- -- -- -- -
可以看到，racedObservable 只发出了 observable2 中的值，因为 observable2 发出的值比 observable1 先到达。
forkJoin
forkJoin 可以将多个 Observable 合并成一个 Observable。当所有 Observable 都完成时，forkJoin 才会发出一个数组，这个数组包含了所有 Observable 最后发出的值。
------ - -------- - ---- ------- ----- ----------- - ----- -- --- ----- ----------- - ----- -- --- ----- -------------------- - --------------------- ------------- -------------------------------------------- -- --- --
可以看到，forkJoinedObservable 发出的数组包含了 observable1 和 observable2 中的最后一个值。
区别总结
- merge：合并多个 Observable，任意 Observable 发出值时都会立即发出。
- concat：合并多个 Observable，依次发出每个 Observable 的值，直到当前 Observable 完成后才会发出下一个 Observable 的值。
- race：合并多个 Observable，当任意 Observable 发出值时停止其它 Observable 并发出这个值。
- forkJoin：合并多个 Observable，当所有 Observable 都完成时发出一个数组，包含所有 Observable 最后发出的值。
学习与指导意义
掌握 RxJS 中的 merge、concat、race、forkJoin 可以帮助我们更好地处理异步数据流。例如，我们可以使用 forkJoin 来同时请求多个数据源，使用 merge 来处理多个事件流等。
同时，我们也要注意这些操作符的区别，根据具体的需求选择合适的操作符。
希望这篇文章能够帮助你更好地理解 RxJS 中的 merge、concat、race、forkJoin。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660cfa79d10417a222d623f4