使用 JavaScript Axios/Fetch。你能禁用浏览器缓存吗？

Posted 2023-02-22

【中文标题】使用 JavaScript Axios/Fetch。你能禁用浏览器缓存吗？

【英文标题】：Using JavaScript Axios/Fetch. Can you disable browser cache?

【发布时间】：2018-08-22 03:29:19

【问题描述】：

我正在尝试查询我正在更新到 React.js 的 freeCodeCamp 项目的报价 API。我现在尝试使用Fetch 或Axios 来查询API，但它正在浏览器中缓存响应。我知道在$ajax 中有一个 cache: false 会强制浏览器执行新请求。

有什么方法可以让Fetch 或Axios 做同样的事情吗？

cache-control 设置似乎已经被Axios 设置为max-age: 0。

这是我查询 API 的代码。

generateQuote = () => 
  axios.get('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1')
    .then(response => 
      const  title, content, link  = response.data[0];
      console.log(title, content, link)
      this.setState(() => ( title, content, link ));
    )
    .catch(err => 
      console.log(`$err whilst contacting the quote API.`)
    )

【问题讨论】：

你在axios设置里试过'Cache-Control': 'no-cache'吗？

是的。该特定 API 开始给出关于在飞行前未找到 Cache-Control 的错误。看来我不能用那个特定的 API 设置那个标题

【参考方案1】：

好的，我找到了解决方案。我必须在 API url 上设置一个时间戳才能让它进行新的调用。似乎没有办法强制 axios 或 fetch 禁用缓存。

这就是我的代码现在的样子

axios.get(`https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&timestamp=$new Date().getTime()`)
  .then(response => 
    const  title, content, link  = response.data[0];
    console.log(title, content, link)
    this.setState(() => ( title, content, link ));
  )
  .catch(err => 
    console.log(`$err whilst contacting the quote API.`)
  )

【讨论】：

对于 axios 0.18.0，如果 response 设置了 Cache-Control: no-cache 标头，则始终会发送请求。

这发生在我的 IE 11 上（使用 Outlook 插件）。这个解决方案就像一个魅力。

这对我有用。我为来自请求拦截器的所有获取请求添加了一个时间戳参数，它似乎没有引起其他任何问题。谢谢。

在请求 url 中添加时间戳被视为另一个新 url。 axios 是否将此数据存储为每个 url 的缓存？

【参考方案2】：

我将这些标头添加到所有 axios 请求中，并且运行良好。

axiosInstance.defaults.headers = 
  'Cache-Control': 'no-cache',
  'Pragma': 'no-cache',
  'Expires': '0',
;

【讨论】：

Pragma: no-cache 是 iOS Safari 正常运行所必需的，请参阅 bugs.webkit.org/show_bug.cgi?id=170714

这会导致此消息出错：Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.

【参考方案3】：

我认为您只需在每次进行 axios 调用时使 url 不同。时间戳只是这样做的一种方法。如果您正在开发 PWA，还可以考虑禁用或过滤 Service Worker 缓存方法。

【讨论】：

如果您查看屏幕截图，您会看到没有下载 Service Worker 文件，因为我没有使用 Service Worker 来创建 PWA。

Al Herrera，添加时间戳是否也会阻止服务人员捕获？

【参考方案4】：

看来，添加时间戳是唯一始终有效的方法。

如果你使用的是 Vue，例如：

const api = axios.create(
  baseURL: 'https://example.com/api',
  params: 
    t: new Date().getTime()
  
)
Vue.prototype.$api = api

所以你可以使用它：

this.$api.get('items')

并且它总是会根据当前的请求时间为 url 添加不同的时间戳。

【参考方案5】：

创建一个 axios 实例，然后为每个请求添加时间戳。

const axiosInstance = axios.create()

axiosInstance.interceptors.request.use(
    function (config) 
      // Do something before request is sent
      config.params =  ...config.params, timestamp: Date.now() ;
      return config;
    ,
    function (error) 
      // Do something with request error
      return Promise.reject(error);
    
  );

【参考方案6】：

如果您不想对所有 axios 请求禁用缓存，您可以通过在 axios 调用中使用以下参数来仅对一个请求禁用缓存：

axios.get(
  'https://YOUR-URL.com',
  
    // query URL without using browser cache
    headers: 
      'Cache-Control': 'no-cache',
      'Pragma': 'no-cache',
      'Expires': '0',
    ,
  
)

【讨论】：

和这个答案一样吗？ ***.com/a/62781874/8294418

不，您链接的答案将它设置为 all axios 请求，但这可能并不总是想要的。 OP 要求类似 ajax 的等价物......我将更改我的答案描述以解释更多......