Angular 显示缓存数据并在后台需要数据时更新新数据

Question

我正在开发一个 Angular 应用程序来处理来自服务器的大量数据。因此，每个 API 调用最多可能需要 5 秒，而且有些页面我们的 API 调用很少。

我想要实现的是将我正在访问的每个页面的数据保存在缓存中，如果我再次导航到该页面，我将立即看到缓存数据，调用 API 获取新数据并仅刷新组件他们的模型已经改变。

现在 API 调用是通过 ngOnInit 方法完成的，应用程序会显示微调器，直到显示结果。

除了将 json 保存在本地存储或类似的东西中之外，是否有任何最佳实践可以在 Angular 中实现该行为？

Answer 1

TL;DR; 谷歌“使用 RxJS 的缓存技术”

更大的答案:

有几个选项:

• 如果需要持久保存数据到localStorage/sessionStorage
• 将其作为纯数据保存在服务中(只是一些变量)
• 用类似BehaviorSubject 的东西模拟状态并检索它的最新值(例如article)
• 使用caching with RxJS
• 使用像NgRx这样的存储, 如果你有的话

...还有更多取决于您想要什么以及代码的构造方式。

如果我是你 - 如果它是一个简单的应用程序并且没有庞大的状态和管理，我会选择带有 BehaviorSubject 的变体作为初始。