[from disk cache] Axios 请求取得脏数据

本文深入探讨了fromdiskcache与frommemorycache的区别,前者表示资源已加载并存储在硬盘上,即使页面关闭也不会释放,后者则存储在内存中,页面关闭后即释放。文章还介绍了如何通过设置headers来禁用缓存,避免脏数据问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文地址: 做棵大树

BG: 最近在开发一个项目的过程中,发现本机切换账户后,发送相同请求,竟然请求到了相同的数据,而后发现了这个小细节。

起初,我以为脏数据是由于后台缓存机制的问题,而后经过调试和搜寻发现,并非是后台缓存的问题。而是前台数据请求的问题,经过查看两次发送的请求,发现首次发送成功,而第二次,则在RequestHeader中出现了 from disk cache 的信息,请求并未发送成功。

那么什么是 from disk cache 呢?

from disk cache 是指已经在之前的某个时间加载过该资源,所以并不会请求服务器,且此资源不会随着该页面的关闭而释放掉,因为是存在硬盘当中的,下次打开仍会出现from disk cache

也就是说,前台自动查询了你以往的查询记录,而后从本地相同查询中取出了数据,并未发送至服务器重新获取;于是就出现了脏数据的情况。

顺带,我也查了另一个相类似的错误:from memory cache

该提示,也是指:这个资源是直接从内存中拿到的,不会请求服务器一般已经加载过该资源且缓存在了内存当中,当关闭该页面时,此资源就被内存释放掉了,再次重新打开相同页面时不会出现 from memory cache 的情况。

对于这种情况的解决也十分简单,禁用缓存即可:

headers: {‘Cache-Control’: ‘no-cache’}

Axios中: axios.defaults.headers['Cache-Control'] = 'no-cache'

### 如何在 HTML 中使用 Axios 发起 HTTP 请求 为了在纯 HTML 项目中集成 Axios 并发起 HTTP 请求,首先需要确保 Axios 已经被正确加载到项目环境中。以下是具体实现方法: #### 加载 Axios 库 可以直接通过 `<script>` 标签引入 Axios CDN 来快速开始[^2]。 ```html <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> ``` 这一步骤允许开发者无需额外配置即可立即使用 Axios 功能。 #### 编写 JavaScript 代码发起请求 一旦 Axios 被成功加载,在页面中的 `<script>` 部分编写如下所示的 JavaScript 代码可以完成基本的数据请求操作[^4]。 对于 **GET 请求**: ```javascript document.getElementById('get-data').addEventListener('click', function() { axios.get('https://jsonplaceholder.typicode.com/posts') .then(function (response) { console.log(response.data); document.body.innerHTML += "<pre>" + JSON.stringify(response.data, null, 2) + "</pre>"; }) .catch(function (error) { console.error(error); }); }); ``` 上述代码展示了当点击按钮时触发 GET 请求的过程,并将返回的结果打印至控制台以及追加到网页主体内显示给用户查看。 而对于 **POST 请求**, 则需指定要提交的数据对象作为第二个参数传递给 `post()` 方法: ```javascript document.getElementById('send-post').addEventListener('click', function() { const postData = { title: 'foo', body: 'bar', userId: 1 }; axios.post('https://jsonplaceholder.typicode.com/posts', postData) .then(function (response) { console.log(response.data); document.body.innerHTML += "<p>Post request succeeded!</p>"; }) .catch(function (error) { console.error(error); }); }); ``` 此段脚本会在按下相应按钮后向目标 URL 提交 POST 请求并将新创建的文章信息发送出去;如果请求成功,则会更新页面告知用户操作已完成。 #### 处理响应数据 无论是哪种类型的请求,都可以利用 `.then()` 方法链来捕获来自服务器端的成功响应,并对其进行进一步处理。而遇到错误情况则可通过 `.catch()` 捕捉异常并适当反馈给前端使用者[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值