如果 localStorage 项为 null，则设置 item，否则返回 Observable 中的 items

Question

我正在开发一个 Angular 6 应用程序，我想在 localStorage 中存储常用但很少更改的对象数组。 我有一个服务类，用于从 Web 服务中检索这些数组。 服务中的函数返回可观察量。 我想检查本地存储以查看阵列是否已经存在。 如果不是，那么我想从 Web 服务获取数组并将 localStorage 项设置为返回值。 如果它已经存在，只需返回存储的内容。 我正在努力解决如何从该条件的所有可能分支返回可观察量。 似乎有人已经做了一些事情，但我找不到任何这样的例子......

这是我返回这些数组之一的现有函数：

getApprovalRoutes(): Observable < ApprovalRoute[] > {
  if (!localStorage.getItem("allRoutes")) {
    this.http.get < ApprovalRoute[] > (`${this.baseUrl}/Routes`).subscribe(ar => {
      localStorage.setItem("allRoutes", JSON.stringify(ar));
      return Observable.from(ar);
    });
  } else {
    return Observable.from(JSON.parse(localStorage.getItem("allRoutes")));
  }
}

当我运行它时，出现以下错误：

无法读取未定义的属性"订阅"

感谢您的帮助！

Answer 1

this.http.get < ApprovalRoute[] > (`${this.baseUrl}/Routes`).subscribe(ar => {
  localStorage.setItem("allRoutes", JSON.stringify(ar));
  return Observable.from(ar);
});

以上不会返回可观察量。不能将订阅服务器中的值返回给函数的调用方。

return Observable.from(JSON.parse(localStorage.getItem("allRoutes")));

上面使用from()将值数组转换为单独发出的值。这与发出数组的返回类型Observable<ApprovalRoute[]>不匹配。

根据我在你的例子中看到的。我想也许这就是你想要的。

getApprovalRoutes(): Observable<ApprovalRoute[]> {
    return of(localStorage.getItem('allRoutes'))
        .pipe(
            switchMap(routes => {
                if (!routes) {
                    return this.http.get<ApprovalRoute[]>(`${this.baseUrl}/Routes`)
                        .pipe(tap(ar => localStorage.setItem('allRoutes', JSON.stringify(ar))));
                }
                return of(JSON.parse(routes));
            })
        );
}

您希望从 localStorage 发出值，如果值为空，则切换到 HTTP 请求。按 Tab 键进入 HTTP 结果并将其放入存储中。