代码之家 › 专栏 › 技术社区 › Asjas

使用JavaScript Axios/Fetch。能否禁用浏览器缓存?

fetch-api axios reactjs javascript

Asjas · 技术社区 · 7 年前

我正在尝试查询freeCodeCamp项目的报价API,我正在更新以作出反应。js。我现在正在尝试使用 Fetch 或 Axios 查询API,但它正在浏览器中缓存响应。我知道在 $ajax 有一个 { cache: false } 这将迫使浏览器执行新请求。

有没有什么方法可以让我也这样做 取来 或 Axios ?

这个 cache-control 设置似乎已设置为 max-age: 0 通过 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 回复 | 直到 3 年前

Asjas 7 年前

好吧,我找到了解决办法。我必须在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.`)
  })

Greg T Prateek 4 年前

我将这些头添加到所有axios请求中,效果很好。

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

m13r 3 年前

如果不想对所有axios请求禁用缓存,可以使用中的以下参数仅对一个请求禁用缓存 axios 电话:

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

Al Herrera 6 年前

我觉得每次打axios电话时,你只需要让url不一样。时间戳只是一种方法。如果您正在开发PWA,还可以考虑禁用或过滤service workers缓存方法。

Anar Salimkhanov 3 年前

似乎,添加时间戳是唯一始终有效的方法。

如果您使用的是Vue,例如:

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

因此,您可以将其用于:

this.$api.get('items')

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

Milad Raeisi 3 年前

创建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);
    }
  );