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

Question

我有一个名为 saveToLocalStorage 的 BehaviorSubject 变量，在一个方法中 next() 方法被调用了两次。这导致了一个问题，因为两者中只有一个完成了。另一个被简单地覆盖。 subscribed 调用的服务仅将数据保存到本地存储。显然，下一次调用之间必须有一个延迟，所以我决定像这样处理 Observable 中的调用（假设 if 语句 returns 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]));

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

编辑：多亏了 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 将确保以串行方式处理每个源值。

下面的代码首先创建一个 "action" 流来发出值（我只是发出 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);
  }

我这里有一个 stackblitz：https://stackblitz.com/edit/angular-concatmap-deborahk

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

How do i prevent behaviorsubject next() calls from overwriting each other?

angular

typescript

rxjs

observable

behaviorsubject