fetch()，如何发出非缓存请求

etc

在使用 fetch() 方法时，我们可以通过设置请求的相关参数来发出非缓存请求。通常情况下，浏览器会自动对请求进行缓存处理，以提高性能和减少网络流量。然而，在某些情况下，我们需要确保每次请求都能从服务器获取最新的数据，这时就需要发出非缓存请求。

如何发出非缓存请求

要发出非缓存请求，我们可以通过在请求的头部信息中添加一些特定的参数来实现。一种常见的方式是使用 Cache-Control 头部字段，将其设置为 no-cache。这将告诉浏览器不要使用缓存，并且每次都要向服务器发送请求。

另外，我们还可以使用 Pragma 头部字段，将其设置为 no-cache。这是一个兼容性比较好的方式，可以在较老的浏览器中使用。

下面是一个使用 fetch() 方法发出非缓存请求的简单示例代码：

Javascript
fetch('https://api.example.com/data', {
  headers: {
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache'
  }
})
  .then(response => response.JSon())
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  });

在上述代码中，我们使用了 fetch() 方法来发送一个 GET 请求到指定的 URL。在请求的头部信息中，我们设置了 Cache-Control 和 Pragma 字段的值为 no-cache，以确保每次请求都不会使用缓存。

案例代码

为了更好地理解如何发出非缓存请求，下面我们以一个简单的案例代码来演示：

Javascript
// HTML 代码
<button id="fetchBtn">发送请求</button>
<div id="result"></div>
// JavaScript 代码
const fetchBtn = document.getElementById('fetchBtn');
const resultDiv = document.getElementById('result');
fetchBtn.addEventListener('click', () => {
  fetch('https://api.example.com/data', {
    headers: {
      'Cache-Control': 'no-cache',
      'Pragma': 'no-cache'
    }
  })
    .then(response => response.JSon())
    .then(data => {
      resultDiv.textContent = JSON.stringify(data);
    })
    .catch(error => {
      resultDiv.textContent = '请求出错';
    });
});

在上述代码中，我们定义了一个按钮和一个用于显示请求结果的