ReactJS中如何将API响应缓存24小时，到期后重新调用API更新缓存

方案选择说明 #

首先先回应你提到的几个疑问：

• 如果你的配置数据不包含用户敏感凭据、核心密钥这类信息，用LocalStorage完全足够。你看到的安全风险主要是XSS攻击场景下的明文数据泄露，要是只是存普通的业务路径、kafka topic这类配置，就算被读取也不会产生严重风险，没必要过度纠结安全问题。Cache API更适合缓存静态资源、HTTP响应本体，你需要额外存储过期时间戳，用LocalStorage反而更灵活易维护。
• 你用的superagent-bluebird-promise完全支持拦截器实现缓存，而且是更优雅的方案，不需要改动现有核心拉取逻辑的代码。

实现步骤 #

你可以按照下面的流程落地，满足24小时缓存的需求：

• 第一步：提前定义好缓存存储的key名，以及24小时对应的过期时长（固定为86400000毫秒即可）。
• 第二步：在现有请求逻辑的最前面增加缓存校验逻辑：调用agent.Core.fetch()前，先从LocalStorage读取对应缓存key的数据，数据结构需要包含两个字段：缓存的配置数据、缓存写入的时间戳。
• 第三步：缓存校验判断：如果缓存存在，且当前时间减去缓存写入时间戳小于24小时，直接用缓存的配置数据走后续的字段解析赋值逻辑，不需要发起真实API请求。
• 第四步：如果缓存不存在、已过期或者解析失败，再走原有API请求流程；请求成功拿到合法响应后，把解析好的配置数据和当前时间戳一起写入LocalStorage的对应缓存key中。
• 第五步（可选，用拦截器实现的简化方案）：给superagent加全局请求拦截器，匹配到该配置拉取的请求时，先执行上述缓存校验逻辑，命中缓存直接返回构造好的成功响应，不用发请求；再加响应拦截器，匹配到该请求成功返回时，自动把响应数据和时间戳写入缓存，完全不用改动现有业务代码。
• 第六步（可选降级逻辑）：如果API请求失败，只要LocalStorage里还有历史缓存数据（哪怕已经过期），优先用历史缓存数据保证业务可用，只打错误日志不需要弹出用户提示。

内容的提问来源于stack exchange，提问作者Maulik Sakhida