使用fetch()发起非缓存请求-JavaScript中文网-JavaScript教程资源分享门户

前言

fetch() 是一种用于发送网络请求的 API，它比传统的 XMLHttpRequest 更加易用和灵活。但是对于需要立即获取最新数据的应用程序来说，浏览器可能会缓存最近的网络请求响应。这意味着如果我们使用默认配置发出多次相同的请求，则会返回缓存的响应而不是最新数据。本文将重点介绍如何在使用 fetch() 时禁用缓存，并调用最新数据。

禁用缓存

要发送非缓存请求，可以采取以下几种方法：

添加随机查询参数：通过向请求 URL 添加一个随机字符串或时间戳等唯一标识符，强制浏览器发起新的请求。例如：

const url = 'https://example.com/data.json';
const randomString = Math.random().toString(36).substring(7);
const noCacheUrl = `${url}?t=${randomString}`;

fetch(noCacheUrl)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

设置请求头：另一种方法是设置请求头中的“Cache-Control”字段为“no-cache”，告诉浏览器不要缓存该请求。例如：

-- -------------------- ---- -------
----- --- - --------------------------------
----- ------- - -
  ------- ------
  -------- -
    ---------------- ----------
  -
--

---------- --------
  -------------- -- ----------------
  ---------- -- ------------------
  ------------ -- ----------------------

以上两种方法都可以禁用缓存，具体选择哪种方法取决于您的偏好和应用程序需求。

总结

fetch() 是现代 JavaScript 应用程序中常用的网络请求 API 之一。默认情况下，浏览器可能会缓存最近的网络请求响应。为了确保我们获得最新数据，我们可以通过添加随机查询参数或设置“Cache-Control”请求头来禁用缓存。这些技巧可以帮助我们在使用 fetch() 时更好地控制网络请求行为，从而提高应用程序的性能和可靠性。

参考资料

MDN Web Docs: Fetch API

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/29956