javascript - 如何将 API 响应缓存 24 小时，之后我们可以调用 API 并在 ReactJS 中再次更新缓存

Question

如何缓存 API 响应？

在当前场景中，我们遇到了 API 被点击 10k 次的问题，而这个 API 我们只需要在 24 小时后调用一次。

let configurationsLoaded = false
async function fetch() {
  try {
     // Here we will have the JSON response
    const data = await agent.Core.fetch() 
    if (!Array.isArray(data)) {
      throw new Error('Invalid response (' + JSON.stringify(data) + ')')
    }

    data.forEach(({ Name, Value }) => {
      if (Name.startsWith('url.path.')) {
        config.urls[Name.replace('url.path.', '')] = Value
      } else if (Name.startsWith('kafka.topic.')) {
        config.kafkaTopics[Name.replace('kafka.topic.', '')] = Value
      }
    })

    configurationsLoaded = Object.keys(config.urls).length > 0
    if (configurationsLoaded) {
      configurationsLoadedTime = Date.now()
    }
  } catch (error) {
    configurationsLoaded = false
    showToastMessage('Failed to fetch app configurations: ' + error.message)
    return console.error('Failed to fetch app configurations', error)
  }
}

我们是否需要使用 LocalStorage API 来缓存数据？因为即使在数据加密之后，我也读过很多文章。这不安全！或者我们可以使用浏览器的缓存 API 吗？ https://developer.mozilla.org/en-US/docs/Web/API/Cache

我们也使用了 'superagent-bluebird-promise' npm 包，那么我们可以使用拦截器来缓存调用吗？

什么是我们可以在这里使用的最佳方法来将数据保留 24 小时并在每 24 小时后调用一次。

PS我不是要代码，但是如果有人可以给我一个转换为结果的步骤，那将是一个很大的帮助！提前致谢！

标签： javascriptreactjscachingdata-structureslocal-storage