如何在 JavaScript 中使用 Cache-Control 头来控制缓存？

在 JavaScript 中，你可以使用 fetch API 来发送 HTTP 请求，并通过设置 Cache-Control 头来控制缓存。例如：

fetch('https://example.com', {
  headers: {
    'Cache-Control': 'no-cache'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
1
2
3
4
5
6
7
8

在这个例子中，Cache-Control: no-cache 指示浏览器不使用缓存的响应，而是向服务器发送请求以验证响应的新鲜度。

需要注意的是，这只影响浏览器的行为，不影响服务器的行为。如果你想控制服务器的缓存行为，你需要在服务器端设置 Cache-Control 头。

另外，如果你想在 Service Worker 中控制缓存，你可以使用 Cache API。这是一个更灵活的缓存机制，可以让你精确地控制哪些请求和响应被缓存，以及如何匹配和使用它们。

Axios中设置 Cache-Control
在使用 Axios 发送请求时，你可以通过在配置对象中设置 headers 属性来添加 Cache-Control 头。例如：

axios.get('https://example.com', {
  headers: {
    'Cache-Control': 'no-cache'
  }
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
1
2
3
4
5
6
7

在这个例子中，Cache-Control: no-cache 指示浏览器不使用缓存的响应，而是向服务器发送请求以验证响应的新鲜度。

需要注意的是，这只影响浏览器的行为，不影响服务器的行为。如果你想控制服务器的缓存行为，你需要在服务器端设置 Cache-Control 头。