Question

出于这个目的，我想最大限度地减少来自应用程序的网络请求数量，我曾考虑将GET API中的数据存储到浏览器的本地存储中。我想到要在服务中这样做，以便每当有GET API请求时，应用程序都会首先检查本地存储（如果数据不存在），然后仅发出网络请求。我在这里感到困惑，如何将数据存储在本地存储中，即如何从网络请求中保存数据，然后将数据发送给订户。我知道.pipe（）方法，但不知道用于保存数据的rxjs运算符。

TIA

Answer 1

这非常简单-是的，您应该使用pipe

return http.get("something").pipe(
   tap(value=>save your value in local storage)
)

tap具有与subscribe相同的签名（参数），并且用于窥视管道中的值-您可以说它的行为类似于订阅，但没有实际的订阅。

Answer 2

我正在执行与您的要求类似的实现。

现在，登录后，我将获得所有不常更改的数据（例如辅助表），并将其保存到本地存储。您不需要这样做，可以将它们保存在内存中，因为我也保存了令牌，令牌的有效期为1小时。如果关闭浏览器然后重新打开，我将检查令牌是否存在并且有效，如果是，则跳过登录。在这种情况下，我将从localstorage中读取所有辅助表数据。

因此，登录后，我会调用InitCache服务方法。

InitCache() {
  this.http.get<IEmpresa[]>(
     this.url() + 'empresas',
     { headers: this.getAuthHeaders() }
  ).subscribe(
     data => {
        this.cache.Empresas = data;
        this.SaveToLocalStorage("Empresas"); // This is only needed if you skip login
     } 
  )
...other gets
}

然后我在服务中有一个方法，当我需要该数据时调用。

Empresas() {
   return this.cache.Empresas;
}

这正常，但是我不喜欢它，因为您需要注销/登录以刷新数据，或更糟糕的是，单击ajjjjj按钮。

新的解决方案：由于我将asp.net核心用作后端，因此实现了signalR。我将尝试解释它的作用。

角度应用程序启动时，它将连接到signalR集线器，并等待消息。在端点的每个控制器中，当我修改辅助表时，我都会向客户端发送一条消息，通知“此”表已更改，请更新您的缓存。

angular应用接收此消息，进行get调用，更新其缓存并将其保存到本地存储。而且...最重要的是，服务中的方法现在是一个BehaviourSubject，这意味着当收到更新时，会将其分派给所有订阅者（我在组件中订阅了此数据）。

我希望我能把这个想法说出来。

Angular 5将HTTP数据存储在本地存储中

2 个答案: