17、RxJS 响应式流与业务流程协调

RxJS 响应式流与业务流程协调

1. 应用响应式流

在响应式编程中，我们常常需要处理多个流的输出并将它们合并。例如下面的代码展示了如何实现一个拖拽功能：

const drag$ = mouseDown$.
  concatMap(() =>
    mouseMove$.takeUntil(
      mouseUp$.filter(() => confirm('Drop widget here?'))));

这个例子虽然简单，但它展示了如何将多个流组合以实现复杂的交互。实际上，我们可以支持的用例远不止这些。理解扁平化流对于掌握 RxJS 至关重要，因为几乎所有非平凡的应用都会使用到它。

在处理流时，我们可以采用不同的策略来合并多个可观察对象的输出，简化订阅逻辑。以下是一些常见的合并策略：
| 操作符 | 描述 |
| ---- | ---- |
| merge() | 可以交错合并多个流 |
| switch() | 取消当前投影的可观察对象并切换到新的 |
| concat() | 按顺序保留整个可观察序列 |
| mergeMap() 和 concatMap() | 可以将可观察对象组合并投影到源可观察对象中 |

我们还可以使用拆分操作符来组合和扁平化一系列嵌套的可观察流。通过这些操作符，我们实现了一些实际的应用，如自动建议搜索框、实时股票行情器和拖拽功能。

2. 协调业务流程

将多个可观察对象转换为单个对象可以简化其使用并减少管