使用fetch()发起非缓存请求

前言

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

禁用缓存

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

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

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

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

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

总结

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

参考资料

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/29956


猜你喜欢

  • Stick div to top of parent element

    在前端开发中,有时需要实现一个“sticky”效果,即当用户滚动页面时,某个元素会停留在屏幕顶部并保持可见。本文将介绍如何使用 CSS 和 JavaScript 实现这种效果。

    6 年前
  • JavaScript 中原型和构造函数的区别

    在 JavaScript 中,prototype(原型)和 constructor(构造函数)是常常被使用到的重要概念。然而,对于这两者之间的差异,许多初学者仍然感到困惑。

    6 年前
  • AngularJS: OPTIONS预检请求在$http.post请求之前

    AngularJS: OPTIONS预检请求在$http.post请求之前 在使用AngularJS进行开发时,我们可能会遇到一个问题:当使用 $http.post() 方法提交数据时,浏览器会先发出...

    6 年前
  • 如何在React Router中限制路由访问?

    React Router 是 React 社区中最受欢迎的路由库之一。在构建 React 应用程序时,React Router 可以使你的应用程序具有复杂的导航和 URL 管理功能。

    6 年前
  • 将 C# DateTime 转换为 Javascript Date

    在前端开发中,经常需要将后端传来的数据进行处理和展示。其中一个常见的问题是如何将 C# DateTime 类型转换为 Javascript Date 类型。本文将详细介绍这个问题的解决方案,并提供示例...

    6 年前
  • 深入理解 JavaScript 全局命名空间和闭包

    JavaScript 作为一种解释性语言,具有全局命名空间的概念。全局命名空间允许我们在不同的地方定义全局变量、函数等,但也会导致命名冲突的问题。为了避免这些问题,我们需要深入理解 JavaScrip...

    6 年前
  • Large AngularJS 应用程序设计

    AngularJS 是一款流行的前端框架,可用于构建复杂的单页应用程序(SPA)。但是,在处理大型应用程序时,代码组织和架构变得更加重要,以确保可维护性和可扩展性。

    6 年前
  • Javascript 中的保留字:'clear' 是否是其中之一?

    在 Javascript 中,有许多关键词和保留字,它们拥有特殊的含义并在代码中具有特殊的作用。本文将探讨一个备受争议的问题:'clear' 是否是 Javascript 中的保留字。

    6 年前
  • OO jQuery 和类

    在前端开发中,jQuery 是一款非常流行的 JavaScript 库,简化了许多 DOM 操作。当我们想要使用面向对象编程范式时,jQuery 可以为我们提供 OO 风格的代码实现。

    6 年前
  • 使用 head.js 有哪些缺点?

    在前端开发中,我们通常会使用 JavaScript 库来帮助我们组织和管理代码。head.js 是一个小巧的 JavaScript 库,可以实现异步加载 JavaScript 和 CSS 文件,并在页...

    6 年前
  • 在循环中使用$.Deferred()和嵌套的Ajax调用

    在前端开发中,我们常常需要同时进行多个异步请求。这时候,我们可以使用jQuery的$.Deferred()来处理异步请求,确保所有请求都完成后再执行下一步操作。但是,在循环中进行嵌套的Ajax调用时,...

    6 年前
  • 使用WebRTC将通过getUserMedia捕获的MediaStream发送到服务器

    概述 WebRTC是一种用于音频、视频和数据传输的实时通信技术,它使得在浏览器中进行点对点的实时通信变得容易。getUserMedia是WebRTC API之一,它允许网页应用程序从用户设备上获取音频...

    6 年前
  • 检测 iframe 加载新 URL

    背景 在前端开发中,经常会使用 iframe 元素来嵌入其他网站的内容。但是,当 iframe 开始加载一个新的 URL 时,我们可能需要执行一些操作来处理这个过程。

    6 年前
  • Visual Studio 2013 缓存旧版 .js 文件的问题

    在前端开发中,我们经常会遇到浏览器缓存的问题。有时候即便我们已经更新了代码,但是浏览器还是会加载旧版的文件,导致页面出现问题。这个问题在使用 Visual Studio 2013 进行开发时也会出现。

    6 年前
  • Google Maps V3:只在视口中显示标记 - 清除标记问题

    Google Maps API是一个强大的工具,可以轻松地将地图添加到网站中。然而,在处理大量标记时,会遇到一些性能难题。本文将介绍如何使用Google Maps V3 API仅在当前视口中显示标记,...

    6 年前
  • JavaScript 中为什么有些属性名以双下划线开头?

    在阅读一些 JavaScript 代码时,你可能会遇到一些属性名以双下划线 __ 开头的情况。例如: ----- --- - - ------------- -- -- -------- - -...

    6 年前
  • 如何使用 normalizr 向 Redux Store 添加/删除数据

    Redux 是一个流行的 JavaScript 应用程序状态管理库,而 Normalizr 又是 Redux 生态系统中广泛使用的工具,它可以帮助你规范化嵌套的 JSON 数据对象。

    6 年前
  • Bluebird Promise.all - 多个 Promise 的成功和失败的汇总

    在前端开发中,经常需要同时处理多个异步操作,Promise 是一个非常有用的工具。而 Bluebird 是一个著名的 JavaScript Promise 库,它提供了丰富的功能,其中之一就是 Pro...

    6 年前
  • 判断 clearInterval 是否被调用

    在 JavaScript 中,我们经常使用 setInterval 函数来定时执行某些操作。但是,在某些情况下,我们可能需要在一段时间后停止这个定时器。此时,我们可以使用 clearInterval ...

    6 年前
  • 为什么在 JavaScript 函数调用时要使用括号?

    在 JavaScript 中,当我们调用一个函数时,通常会在函数名称后面加上一对括号。例如:myFunction()。这可能让一些初学者感到困惑,为什么需要加括号呢?本文将解释为什么在 JavaScr...

    6 年前

相关推荐

    暂无文章