Rxjs：将中间订阅和完整的可观察对象合并，并整体完成

Posted 2021-04-19

我正在寻找合适的操作员来执行以下操作：

我有多个表单字段，每个字段都有一个可观察的数组来执行一些验证。在更改时，我合并这些observable来执行：

• catch错误：停止验证并设置字段错误
• 完成：所有可观察的成功意味着该字段有效

我的代码看起来像这样：

arrayObs.map(({ fieldName, obs }) => Observable.merge.apply(this, obs)
  .subscribe(
    (result) => {
      // Nothing to do here
    },
    ({ message }) => {
      this.props.handleError(fieldName, message) // add error
    },
    () => {
      this.props.resetError() // reset error on complete
    }
  ), this)

虽然提交，我希望执行相同的处理，但同时在每个字段上执行整个onComplete，如果所有可观察的数组成功完成触发帖子。

我的代码会是什么样的？我是否正在寻找像forkJoin这样的东西来同时运行所有可观察数组但是在运行更多代码之前等待所有数组完成？

答案

在JSFiddle进行了一些挖掘和大量调整之后，我想出了使用create运算符创建一个自定义observable数组的想法（每个字段一个）。

这样，只要merge完成意味着字段的验证完成并成功，我就可以自由地发出值。然后我使用forkJoin运算符订阅这些事件，该运算符仅在所有observable成功完成时才会发出。

你可以看看这个小提琴：https://jsfiddle.net/mentinet/540011q1/

我添加了两个场景示例：一个包含2个有效字段，另一个包含第三个包含验证失败的字段。我还将merge运算符更改为concat，以便按给定顺序执行验证。

你们怎么看待这个解决方案？您有更好的想法或建议使其更清洁或更高效吗？