带有 Angular 双向绑定的 RxJS 在 catchError 中多次输入

问题描述

我有一项服务，可以在会话存储中存储具有到期日期的项目。当我检索一个项目时，如果到期日期已过，该服务将返回空值：

保存物品的方法：

Winapi.ShellAPI.ShellExecute(Handle,'open','cmd.exe','/K tidy.exe -q -xml input.svg',nil,SW_SHOWNORMAL);

检索项目的方法：

private saveSessionData<T>(key: string,value: T) {
    const now = new Date();
    const item = {
      value: value,expiry: now.getTime() + 15 * 60000 // 15 minutes from now
    }
    sessionStorage.setItem(key,JSON.stringify(item));
  }

在我的控制器中，我通过将它们放在 Observable 上来访问其中一个值，例如：

private getSessionData<T>(key: string): T | null {
    const itemStr = sessionStorage.getItem(key);
    if(!itemStr) return null;
    const item = JSON.parse(itemStr);
    const now = new Date();
    if (now.getTime() > item.expiry) {
      sessionStorage.removeItem(key);
      return null;
    }
    return item.value;
  }

然后我将它显示在我的视图中：

const value$ = of(this.storageService.getSessionData<string>('value'))
        .pipe(
          catchError(err => {
            console.log('The session is expired');
            // ... open a modal and route the user to the home
            return err;
          })
        );

一旦我的存储数据过期，我想要的就是打开一个 Modal 并将用户路由到另一个页面（这是我在 {{(value$ | async)}} 中所做的。

问题是，当我的数据实际过期时，在控制台中我有多个日志，这意味着我在 catchError() 中多次输入这是一个问题，因为我的 openModal 函数不是幂等的（因此它打开多次领先到糟糕的用户体验）：

控制台日志：

catchError()

我怎样才能将其更改为仅实际调用一次错误函数？

我尝试在检索数据函数中使用 The session is expired The session is expired The session is expired The session is expired The session is expired 而不是 throws new Error('session expired') 并在我的控制器中放置一个 try() catch() 块，但结果相同。

有没有人知道如何只捕获一次我的错误？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

2-way-object-databinding angular javascript rxjs session-storage