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

IT技术 javascript reactjs fetch axios
2021-04-02 00:48:02

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

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

该cache-control设置似乎已设置为max-age: 0by Axios。

在此处输入图片说明

这是我查询 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.`)
    })

}

6个回答

好的，所以我找到了解决方案。我必须在 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，如果响应Cache-Control: no-cache设置了标头，则始终发送请求。
2021-05-25 00:48:02
这发生在 IE 11 上（使用 Outlook 插件）。这个解决方案就像一个魅力。
2021-05-28 00:48:02
这对我有用。我为来自请求拦截器的所有 get 请求添加了一个时间戳参数，它似乎没有导致任何其他问题。谢谢。
2021-05-31 00:48:02
在请求 url 中添加时间戳被视为另一个新 url。axios 是否将此数据存储为每个 url 的缓存？
2021-06-02 00:48:02

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

axiosInstance.defaults.headers = {
  'Cache-Control': 'no-cache',
  'Pragma': 'no-cache',
  'Expires': '0',
};
这会导致此消息出现错误： Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.
2021-06-13 00:48:02
在Pragma: no-cache需要iOS的Safari浏览器可以正常地，看到bugs.webkit.org/show_bug.cgi?id=170714
2021-06-16 00:48:02

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

Al Herrera，添加时间戳是否也会阻止服务工作者捕捉？
2021-05-31 00:48:02
如果您查看屏幕截图，您将看到没有下载 Service Worker 文件，因为我没有使用 Service Worker 来创建 PWA。
2021-06-07 00:48:02

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

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

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

因此，您可以将其用于：

this.$api.get('items')

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

创建 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);
    }
  );
其它你可能感兴趣的问题
上一篇create-react-app 在依赖项部分安装 devDepencies 下一篇如何在 Javascript 中使用 Moment js 将 ISO 8601 解析为日期和时间格式？