如何解决RxJS中用skipUntil避免表单重复提交的流未定义报错？

问题的核心很明确：你只声明了update$的类型但没有给它初始值，导致skipUntil操作符拿到了undefined，RxJS自然会抛出"你提供了undefined而不是流"的错误。我们只需要给update$一个合法的初始Observable，同时确保后续提交事件能正确被拦截直到当前更新完成，就能解决这个问题。

这里是调整后的完整代码方案：

// 表单引用
@ViewChild('form') form;
// 初始化update$为立即完成的空Observable，确保第一次提交不会被跳过
update$: Observable<any> = Observable.empty();
// 保存订阅实例，用于组件销毁时清理内存
private submitSubscription: Subscription;

ngOnInit() {
  this.submitSubscription = Observable.fromEvent(this.form.nativeElement, 'submit')
    .do(() => { /* 在这里获取并处理表单值 */ })
    .skipUntil(this.update$)
    .mergeMap(() => {
      // 创建当前的更新请求Observable
      const currentUpdate$ = this.datasource.update(/* 传入处理后的表单值 */);
      // 更新update$，让后续提交事件被拦截直到该请求完成
      this.update$ = currentUpdate$;
      return currentUpdate$;
    })
    .subscribe({
      // 无论请求成功还是失败，都重置update$为已完成Observable，允许下一次提交
      complete: () => this.update$ = Observable.empty(),
      error: () => this.update$ = Observable.empty()
    });
}

ngOnDestroy() {
  // 组件销毁时取消订阅，避免内存泄漏
  if (this.submitSubscription) {
    this.submitSubscription.unsubscribe();
  }
}

逻辑说明 #

1. 初始值处理：一开始把update$设为Observable.empty()，这是一个立即完成的流，所以第一次提交事件经过skipUntil时，因为update$已经完成，不会被跳过，能正常进入更新逻辑。
2. 重复提交拦截：当发起更新请求时，我们把update$替换为当前的请求流。此时如果用户重复点击提交，新的提交事件会被skipUntil拦截，直到当前的update$（正在进行的请求）完成或报错。
3. 重置允许提交：在请求完成或报错后，我们把update$重新设为Observable.empty()，这样下一次提交就能正常触发，不会一直被拦截。

如果你的项目使用RxJS 6+，语法会略有不同（比如用fromEvent替代Observable.fromEvent，EMPTY替代Observable.empty()，并通过pipe组合操作符），但核心逻辑完全一致，你可以根据版本自行调整。

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