在React Native应用程序

Question

在React Native应用程序中实现以下方案的最佳方法是什么？

1. 向服务器发出HTTP请求，获取JSON响应和ETag标头。
2. 保存此JSON响应的方式即使在用户重新启动应用程序后仍会保留。
3. 每当重复此HTTP请求时，发送If-None-Match标头。
   1. 当您收到“未修改”响应时，请使用持久缓存中的版本。
   2. 当您收到“成功”响应（意味着响应已更改）时，使持久缓存无效，保存新响应。

React Native是否有一个开箱即用的组件？如果没有，人们用来处理这个问题的最常见方式是什么？

Answer 1

OOF。已经一年多了。我猜你知道这是一个响亮的“不”，对吧？您必须解析响应标头以获取ETag并将其存储在设备上（您没有使用浏览器），然后在从您选择的存储机制中检索它之后将标头添加到后续请求中。

我刚发现这是因为我想看看是否有人在React中做过这个，更不用说React Native了，我什么都没看到。

Whelp，是时候卷起袖子发明这件事了......

Answer 2

好的，这是我目前的解决方案，还没有经过生产测试。会喜欢你的反馈谷歌。

我使用的是Axios，但是如果你还没有实现这个，你可以在fetch周围使用包装器 - 无需使用本机提取！ -

^((.)*(\r\n|\r|\n)*)*(\r\n|\r|\n)+$

我们在这里做的是将响应结果保存到api.cache中，并将etags保存到api.etag中，然后我们每次都向etag发送请求。

我们可以升级它以记住正确的状态代码，或将etags保存到磁盘，duno。你觉得怎么样:)？

Answer 3

React本机的fetch（）API遵循http缓存规范，并且提供了此功能。当您命中304时，将在缓存中找到200个旧的响应并重新使用。

详细信息：

https://github.com/heroku/react-refetch/issues/142

回答：https://stackoverflow.com/a/51905151

React Native的提取API桥接到iOS上的NSURLSession和Android上的okhttp3。这两个库都严格遵循HTTP缓存规范。缓存行为将主要取决于HTTP响应中的Cache-Control和Expires标头。这些库中的每一个都有自己可以调整的配置，例如，控制缓存大小或禁用缓存。

这是How to use NSURLSession to determine if resource has changed?

NSURLSession通过NSURLCache提供的缓存是透明的，这意味着当您请求先前缓存的资源时，NSURLSession将调用完成处理程序/代理，就像发生200响应一样。

如果缓存的响应已过期，则NSURLSession将向源服务器发送一个新请求，但会在缓存中使用Last-Modified和Etag实体标头包含If-Modified-Since和If-None-Match标头（尽管已过期）结果；这种行为是内置的，除了启用缓存之外，您无需执行任何其他操作。如果原始服务器返回304（未修改），则NSURLSession会将其转换为应用程序响应200（使它看起来像您获取了资源的新副本，即使仍从缓存中获取了该资源）。