如何防止 behaviorsubject next() 调用相互覆盖？

Question

我有一个名为saveToLocalStorage 的BehaviorSubject 变量，在一种方法中，next() 方法被调用了两次。这导致了一个问题，因为这两个中只有一个完成了。另一个被简单地覆盖。调用的subscribed 服务将数据保存到本地存储中，仅此而已。显然，下一次调用之间必须有延迟，所以我决定像这样处理 Observable 内的调用（假设 if 语句返回 true）：

Observable.of(1).pipe(
  tap(()=> {if(this.currentWebAppMode !== newMode){
    this.saveToLocalStorage.next([DataType.STORED_RESULTS, null])}; 
  }),
  debounceTime(100))
  .subscribe(result => this.saveToLocalStorage.next([DataType.WEB_APP_MODE, newMode]));  

这行得通，但感觉真的很hacky。所以我想知道是否有更合适的方法来确保后续next() 对saveToLocalStorage 的调用都能够正确执行。

编辑：感谢 Deborah，我能够通过合并 concatMap 运算符而不是 tab 和 debounceTime 来改进我的解决方案，这是我的新代码：

Observable.of(1).pipe(
  concatMap(()=> {if(this.dataStoreService.currentAppMode !== newMode){
    this.saveToLocalStorage.next([DataType.STORED_RESULTS, null])};
  return of(true)}))
  .subscribe(result => this.saveToLocalStorage.next([DataType.WEB_APP_MODE, newMode]));

Answer 1

使用concatMap 将确保以串行方式处理每个源值。

下面的代码首先创建一个发出值的“动作”流（我只是发出 1 和 2，但你明白了）。

随着每个项目的发出，代码会执行所需的管道。

在管道中，代码使用concatMap 来确保每个发出的项目都得到充分处理。如果在第一个项目的处理完成之前发出了一个项目，则第二个项目在内部缓存，并且将在第一个发出的项目的处理完成后立即处理。

在本例中，代码调用doSave 来实际执行保存到本地存储的过程...如果保存成功，则返回 true。

类似这样的：

  saveSubject = new BehaviorSubject<number>(1);
  saveAction$ = this.saveSubject.asObservable();

  source = this.saveAction$.pipe(
    concatMap(value =>
      this.doSave(value)
    )
  );

  ngOnInit() {
    this.source.subscribe();
    this.saveSubject.next(2);
  }

  doSave(value) {
    console.log('Emited value:', value);
    // Save to local storage
    return of(true);
  }

我在这里有一个堆栈闪电战：https://stackblitz.com/edit/angular-concatmap-deborahk