Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[from disk cache] Axios 请求取得脏数据

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

作者头像
做棵大树
发布于 2022-09-09 13:39:40
发布于 2022-09-09 13:39:40
89500
代码可运行
举报
文章被收录于专栏:代码日志代码日志
运行总次数:0
代码可运行

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

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

那么什么是 from disk cache 呢?

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

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
headers: {‘Cache-Control’: ‘no-cache’}

Axios 中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
axios.defaults.headers['Cache-Control'] = 'no-cache'
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 做棵大树 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【前端 · 面试 】HTTP 总结(八)—— HTTP 强缓存
强缓存中,当请求再次发出时,浏览器会判断目标资源是否“命中”强缓存,如果命中则直接从缓存中获取资源,不会再与服务端发生通信。
编程三昧
2021/08/08
4170
【前端 · 面试 】HTTP 总结(八)—— HTTP 强缓存
亿及流量多级缓存 - 客户端缓存
在HTTP协议中If-Modified-Since和If-None-Match分别对应Last-Modified和ETag
Parker
2020/07/22
9270
Cache-Control 请求头与浏览器强制刷新
Cache-Control 作为「响应头」,用以控制缓存策略,这也是前端 HTTP 缓存策略的基础。
山月
2023/01/10
2.5K0
Cache-Control 请求头与浏览器强制刷新
从前端角度理解缓存缓存是怎么回事缓存的类型缓存存储在哪薄荷应用CDN缓存如何合理应用缓存
前端发送请求主要经历以下三个过程,请求->处理->响应。 如果有多次请求就需要重复执行这个过程。
用户2356368
2019/04/03
1.2K0
从前端角度理解缓存缓存是怎么回事缓存的类型缓存存储在哪薄荷应用CDN缓存如何合理应用缓存
一文读懂浏览器缓存
浏览器缓存一直是个老生常谈的话题,也是面试官常常用来鉴别面试者的利器,作为前端来讲这块知识是属于必须掌握的,再者利用好缓存也是做性能优化的有效方法。本文将从缓存原因、缓存读写顺序,缓存位置以及缓存策略这几个角度介绍浏览器缓存,并且最后给出实践的应用举例。
用户4456933
2021/06/01
4430
一文读懂浏览器缓存
HTTP 缓存
先判断 Etag, 再判断 last-modified. 但是结果会由服务器决策.
lucifer210
2020/06/29
6930
HTTP 缓存
你了解 Cache-Control 作为请求头是什么意思吗?
Cache-Control 作为「响应头」,用以控制缓存策略,这也是前端 HTTP 缓存策略的基础。
山月
2022/11/02
3.2K0
你了解 Cache-Control 作为请求头是什么意思吗?
浏览器 & HTTP 缓存策略
强缓存是指在缓存期间,请求不会发送到服务器,浏览器直接返回缓存结果,需要设置 Header:
leocoder
2020/03/27
6070
浏览器缓存机制
Service Worker是运行在浏览器背后的独立线程,一般可以用于实现缓存。使用service worker,传输协议必须为HTTPS。因为service worker 中涉及到请求拦截。
用户3258338
2020/02/25
1.4K0
浏览器缓存机制
Nginx下关于缓存控制字段cache-control的配置说明 - 运维小结
HTTP协议的Cache -Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程。 请求时的缓存指令包括: no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached等。 响应消息中的指令包括: public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。
洗尽了浮华
2019/05/25
9.1K0
设计一个完美的HTTP缓存策略
作为一个前端,了解http缓存是非常必要,它不仅是面试的必要环节,也更是实战开发中必不可少需要了解的知识点,本文作者将从缓存的概念讲到如何在业务中设计一个合理的缓存架构,带你一步一步解开http缓存的神秘面纱。
星哥玩云
2022/07/28
6140
设计一个完美的HTTP缓存策略
【前端词典】F5 同 Ctrl+F5 的区别你可了解
今天在把代码部署到测试环境后,告知产品 UI 问题已修复。几分钟过后,产品说问题还可以复现。而后去产品那才发现她一直使用 F5 刷新页面。我告诉她 F5 和 Ctrl+F5 的区别后,也就有了这篇文章。
小生方勤
2019/06/01
1K0
response headers添加Cache-Control 和request headers添加Cache-Control 到底有啥区别
缓存是一个复合的概念,本文是http缓存系列文章之一,仅讨论Cache-Control这个字段的两个值:no-cache和max-age=0的区别。关于Cache-Control更全面的介绍,请点击这里。
用户7413032
2020/06/11
4.9K0
response headers添加Cache-Control 和request headers添加Cache-Control 到底有啥区别
前端本地缓存概况之浏览器缓存策略
一直以来,前端性能优化 都是前端程序员在业务开发过程中不得不考虑的一个点。前端同学也一直寄希望于服务器更大的吞吐量、更密集的cdn节点;更寄希望于浏览用户使用更优秀的浏览器及更大的带宽。。。然而随着上述几种情况一一被落实时,前端性能仍然没有达到一个让人满意的结果。。。
YP小站
2020/07/15
1.9K0
前端本地缓存概况之浏览器缓存策略
浏览器缓存详细介绍
  我们拿百度首页来举例:   百度搜索输入框上面的logo是一张png图片,当我们浏览器请求这张图片的时候,会先检查该图片的HTTP头部字段,是这样的
从入门到进错门
2019/06/14
8691
前端面试必备技巧(二)重难点梳理
相比于第一篇 前端面试必备技巧,本篇文章更贴合今年的面试实际。第一篇比较全面,也比较基础,建议先看一遍上一篇再看本篇会更容易理解。
solocoder
2022/03/31
8780
前端面试必备技巧(二)重难点梳理
亿级流量客户端缓存之Http缓存与本地缓存对比
客户端缓存分为Http缓存和本地缓存,使用缓存好处很多,例如减少相同数据的重复传输,节省网络带宽资源缓解网络瓶颈,降低了对原始服务器的要求,避免出现过载,这样服务器可以更快响应其他的请求
架构之家
2022/09/01
1.8K0
亿级流量客户端缓存之Http缓存与本地缓存对比
浏览器缓存机制剖析
“缓存一直是前端优化的主战场,利用好缓存就成功了一半。本篇从HTTP请求和响应的头域入手,让你对浏览器缓存有个整体的概念。最终你会发现强缓存,协商缓存 和 启发式缓存是如此的简单。 ” 导读 浏览器对
CSDN技术头条
2018/02/12
1.4K0
浏览器缓存机制剖析
nginx cache的玩法
Nginx版本从0.7.48开始,支持了类似Squid的缓存功能。这个缓存是把URL及相关组合当做Key,用Md5算法对Key进行哈希,得到硬盘上对应的哈希目录路径,从而将缓存内容保存在该目录内。
sunsky
2020/08/20
1.4K0
浏览器缓存机制
简单的说,通过域名,最终得到该域名对应的IP地址的过程叫做域名解析(或主机名解析)。
周三不加班
2019/06/02
1.1K0
相关推荐
【前端 · 面试 】HTTP 总结(八)—— HTTP 强缓存
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验