缓存 API 响应答案

【问题标题】：Cache API response缓存 API 响应
【发布时间】：2019-05-02 00:32:43
【问题描述】：

我们在 Angular 中的 Web 应用程序依赖于 第三方 API，后者在响应中返回 JSON 对象，并且大多数时候它的性能很糟糕，因为我们不能超时 API 调用它的数据很重要.有没有办法引入一个缓存数据库，它从第三方 API 获取数据并存储它或一些 API 缓存机制？如果是，那么数据将如何更新，当实际数据更新时，缓存数据的更新机制是什么。

我不想在客户端缓存数据，因为它不会对所有用户都可用。我说的是集中式缓存数据库或 API Cache，其数据可以保持一致和最新。

谢谢

【问题讨论】：

@Jack Bashford 这只是我们通常在 Angular 中执行的 API 调用，实际问题是第三个 API 响应很慢并且需要添加一些缓存存储。所以我认为我们不需要代码示例
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
如果没有关于您的应用架构的更多信息，例如，第 3 方 API 调用是在客户端还是服务器端完成，或者每个用户/时间/等的调用结果不同，很难回答这个问题。从高级缓存逻辑来看，检查缓存，如果找到并且未超时，则返回该值。如果未找到，则从源获取并使用 TTL 更新缓存值。

标签： javascript node.js

【解决方案1】：

@Sohail 如果 API 性能不好，在客户端使用缓存可能没有多大帮助。我认为您可以使用以下方法来确保您的网络应用用户获得更流畅的体验。

您还没有提到您的服务器端基础架构。所以，YMMV。

polls 3rd 方 API 的后台服务，并将数据存储在您的服务器上。这可以让您的网络应用免于轮询性能不佳的 API。
使用来自后台服务的推送机制（例如socket.io、WebSocket 或类似）将new data 事件发送到在浏览器中运行的 Web 应用程序，然后从您的服务器（不是第 3 方 API）轮询数据。这使得生态系统中的每个组件（Web 应用程序、调用 3rd 方 API 的后台服务以及您自己的 API（仅返回作为轮询 3rd 方 API 的结果而存储的数据）的明确职责）变得更清洁、更精简。

我同意这只是一点工作，但它会使您的应用程序的各个方面更易于维护。

【讨论】：

第三方API
@Sohail：我知道它是第 3 方 API，它不在您的控制范围内。我建议的更改是在您自己的后端和前端中完成的。

【解决方案2】：

我建议将数据缓存在可以在所有组件中使用的全局命名空间变量中，或者使用缓存库，例如 js-cache

<script src="bundle/cache.js"></script> 
<script>
    cache.set('lorem', 'ipsum', 60000);
    console.log(cache.get('lorem'));
</script>

【讨论】：

这是个坏主意。可以使用普通的 HTTP 缓存。无需重新发明，我们为此提供了标准标题。如果您需要更具体的控制（例如离线响应处理），这就是服务工作者的用途。
当我说全局命名空间变量时，我的意思是一个类似于商店的组件，用于在您的项目中缓存数据，这是正常的 HTTP 缓存。如有错误，请见谅
我明白你的意思，不，这不是正常的 HTTP 缓存。如果你做得对，浏览器会为你处理缓存的响应。

【解决方案3】：

这个问题的答案因许多因素而有很大差异，主要是关于 API 返回的内容。由于您经常请求它，我假设它会更改，但您想要缓存，因此更新之间必须有一段时间 - 最简单的方法是向仅返回版本信息的 API 发出请求（或其他 ID、时间戳等），您可以对照最新的 API 请求进行检查，如果有差异，您将知道您需要向 API 发出请求。

根据您缓存的数据是什么，一种选择可能是将响应存储在您的服务器上（例如 cache/latest_api_response.json）。每次应用程序加载并发出 API 请求时，它首先检查本地响应数据，并在可能的情况下检查远程版本以查看是否需要更新（或者您可以，例如，检查数据是否小于 1 小时，等，具体取决于您的需要），如果没有，只需以与从 API 返回下载数据相同的方式返回您的数据。

正如其他人所指出的，存在现有的缓存解决方案，并且确实有一百万种方法可以处理这个问题，所以它在很大程度上取决于您尝试使用的内容！

【讨论】：

我正在搜索类似 hollow.how/quick-start 的内容，但想要缓存 API 缓存数据，这些数据会返回 JSON 对象作为响应。