如何优雅组合RxJS的concatMap与exhaustMap处理reCaptcha提交流程

原有写法问题根因 #

• combineLatest/withLatestFrom失效原因：this.recaptchaV3Service.execute()是单次返回值的冷Observable，把它放在组合流的外部位置，仅会在effect初始化时被订阅执行一次，后续addReview action触发时不会重新执行获取新token，自然没有新值输出。
• 外部变量暂存表单数据的写法隐患：闭包内的临时变量存在竞态风险，若前一次请求未完成就触发新的提交，表单数据会被覆盖，直接导致请求参数错乱。

最优实现代码 #

核心思路是全程在流内部传递上下文，不依赖外部变量，将异步执行逻辑放在高阶映射算子内部保证触发时机正确，表单提交场景用exhaustMap天然实现防重复点击，不需要额外加锁：

createReview$ = createEffect(() => 
  this.actions$.pipe(
    ofType(ReviewsDialogActions.addReview),
    // 外层exhaustMap：整个提交流程（拿token+请求接口）完成前，自动忽略重复触发的提交动作
    exhaustMap(({ review }) => 
      // recaptcha方法放在高阶流内部，每次提交触发时才会订阅执行，保证每次拿到最新有效token
      this.recaptchaV3Service.execute('AddReview').pipe(
        // 拿到token后直接使用当前作用域下的review数据调用创建接口，无需外部暂存
        concatMap(token => this.reviewApiService.create({ ...review, recaptchaValue: token })),
        map(createdReview => ReviewsDialogApiActions.createReviewSuccess({
          createdReview,
          companyId: createdReview.company.id
        })),
        // 错误捕获放在内部流中，单次提交报错不会终止整个effect主数据流
        catchError(error => of(ReviewsDialogApiActions.createReviewError({
          error: error.error.message.join(', ')
        })))
      )
    )
  )
);

方案说明 #

• 无外部状态依赖：表单数据全程在算子作用域内传递，彻底避免竞态问题
• 执行时机准确：reCaptcha调用逻辑放在流内部，每次提交都会重新执行获取新token，不会出现只执行一次的问题
• 天然防重复：exhaustMap会自动丢弃请求进行中的重复提交动作，符合表单提交的交互预期
• 错误隔离：catchError放在内部异步流的管道中，单次请求失败不会影响后续提交的正常触发

提示：如果业务需要按顺序处理所有提交请求（不丢弃重复触发的动作），可以把外层的exhaustMap替换为concatMap；如果需要新请求发起时自动取消前一次未完成的请求，替换为switchMap即可，常规评论提交场景用exhaustMap是最合理的选择。另外注意检查reCaptcha的action名拼写，之前代码里的'AddREview'存在大写错误，需要和后端校验的配置保持一致避免token校验失败。

内容的提问来源于stack exchange，提问作者missbells