AXIOS 请求被浏览器缓存

最新推荐文章于 2024-05-31 19:06:07 发布
最新推荐文章于 2024-05-31 19:06:07 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 过不去的坎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/118671736
版权

测试兄弟今天提了个 BUG，发现在 IE 下修改列表数据后再重新查询，列表没有变化，而 Chrome 浏览器上正常。

经确认，是浏览器缓存所致，因为测试的时候习惯性打开 F12，勾选了 Disable cache(禁用缓存)，所以没注意到。

而 IE 浏览器不常用，并且设置禁用缓存的方式没有 Chrome 那么方便。

但终其原因，还是代码编写上没有对 GET 请求进行缓存清理配置（同一个请求调用多次没有唯一标识）。

然后测试取消勾选了 Chrome 的 Disable cache 再试一下，还是正常的，这又要说到浏览器对于 GET 请求的区别对待了（主要是 IE）

浏览器对于 GET 请求会将请求结果缓存起来，而 POST 不会。其中更具体的细节是：

  • Chrome 和 Firefox 会检测 GET 请求的如果是静态资源才会缓存，如果是数据则不会缓存。
  • IE 浏览器则会将 GET 请求全部缓存，不会检测请求的是什么。

所以对于 GET 请求，最好还是在请求拦截器中加个时间戳吧。

关于 IE 如何禁用缓存：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

皮蛋很白
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios abort掉请求笔记
weixin_44038355的博客
12-14 3837
const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else {
axios-cache-plugin:使用axios时帮助您缓存GET请求
05-28
使用axios时帮助您缓存GET请求。 安装 npm install axios-cache-plugin --save 或者 yarn add axios-cache-plugin 用法 将缓存功能添加到axios import axios from 'axios' import wrapper from 'axios-cache-...
【cache】关于图片动态请求的缓存
mfkarj的博客
12-17 619
定义：所谓的图片动态请求我这里定义的是通过某一路径访问接口，接口通过图片参数标识输出一个图片，非传统的访问通过路径访问某一静态图片。 场景：什么时候会出现图片动态请求还需要加缓存？ 在门户系统中，我们发布一条消息时，其中图片会上传到文件服务器，文件服务器返回一个文件标识，下次访问的时候通过这个标识访问图片。图片修改后，文件标识也会改变，也就是说一个文件标识对应的图片不会发生改变。我们缓存这个图...
axios添加缓存请求，防止多次请求，单页面多个同一组件造成多次请求解决方案
jl15988
09-25 948
在axios中，添加。
axios请求缓存caches
weixin_42977236的博客
05-31 410
缓存axios请求结果，减少重复请求，提高请求效率。
前端请求利用aixos创建数据缓存
pwl124的博客
08-09 631
前端请求利用aixos创建数据缓存
Axios取消请求(AbortController)
ZHZS123的博客
02-16 2572
从 `v0.22.0` 开始，Axios 支持以 fetch API 方式—— [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) 取消请求： ```javascript const controller = new AbortController(); axios.get('/foo/bar', { signal: controller.signal }).then(funct
Vue监听浏览器关闭(或者刷新)、切换标签页，并发送请求给后端
Tjohn9的博客
03-09 3313
监听浏览器关闭，关闭前发送http请求给后端，可以使用navigator.sendBeacon(url)
vite2-axios:封装Axios接口数据缓存+取消重复请求
03-25
在本项目中，axios被封装，以实现数据缓存和请求取消功能。数据缓存通常是为了避免不必要的网络请求，提高页面加载速度，特别是对于那些不经常变动的数据，如配置信息或者用户信息。而取消重复请求则防止了在用户...
axios-0.18.1.zip
最新发布
06-10
6. **支持浏览器缓存**：Axios 可以利用浏览器的HTTP缓存策略，如Last-Modified和ETag，节省网络带宽和提高响应速度。 7. **配置灵活性**：Axios 允许用户自定义许多请求配置，例如URL参数、请求头、超时设置、响应...
axios-0.11.0.tar.gz
06-10
7. **支持浏览器缓存**：Axios 可以根据HTTP缓存策略处理响应，例如，如果服务器设置了合适的响应头，那么相同的请求可以被浏览器缓存，提高性能。 8. **错误处理**：Axios 抛出的错误都是Promise的拒绝原因，可以...
AxiosService:该库可帮助您实现自动刷新授权并通过axios自动重试失败的请求
03-31
AxiosService 该库可帮助您通过axios实现授权的自动刷新。 您可以在原始请求失败时轻松拦截原始请求，刷新授权并继续原始请求，而无需任何用户交互。 当请求由于授权而失败时，由您自己决定。 您可以为新的授权令牌运行刷新调用，也可以运行自定义逻辑。 使用该库创建axios实例，并进行API调用。 只需提供一些获取身份验证令牌所需的配置，该库即可处理与身份验证失败相关的所有情况。 注意：验证失败时，API必须返回HTTP错误状态。 如果您的api在身份验证失败时返回HTTP200，则该库将不起作用。 安装 TBU 用法 创建一个新的axios实例，如下所示 const apiServiceConfig = { } ; /** * Axios Instance */ export const BaseApiInstance = new AxiosService ( {
vue axios 简单封装以及思考
10-17
Vue.js 是一款流行的前端框架，而 Axios 是一个广泛使用的基于 Promise 的 HTTP 库，它可以用于浏览器和 Node.js 环境。...不过，对于复杂的项目，可能还需要考虑更多细节，比如错误处理、状态管理、请求缓存等。
前端终止请求---axios终止请求
weixin_45403802的博客
12-12 2733
​ 如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都通过构造函数创建一个新的的 AbortController，每次请求绑定的都是新的AbortController，这样才能做到多次请求之间不干扰。​ 同理，如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都创建一个新的的 CancelToken，每次请求绑定的都是新的CancelToken，这样才能做到多次请求之间不干扰。
Axios abort 请求
然后他就拿棍子来打我
04-12 550
Axios 接口 abort 请求，依赖于 AbortController 实例的 abort 方法。单个和并行的请求，只需创建一次 AbortController 实例。Axios abort 请求，abort 方法只需调用一次。在接口请求之前更新 AbortController 实例，防止实例 signal.aborted 状态为 true，导致的接口无响应。
vue axios 缓存 接口请求实现缓存加载
carbonzhao的专栏
03-19 1003
开发过程中总有一些数据存放在服务器，但是这些数据基本上一旦生成不会再变，比如省市区三级联动数据、一些静态数据字典等。文章写的多了，开头就不知道怎么写了，硬挤一些句子总觉的卖弄。哦哦哦，我在想啥呢。在调用接口的地方稍微改造一下：增加一个属性：cache:true时则会读取缓存进行接口响应。不使用缓存时，这个值给false或者是不给这个属性即可。注意此缓存为内存缓存模型，未写入localstorage,你自己可以实现localstorage缓存读取。
axios二次封装 数据缓存#防止重复请求
weixin_67917191的博客
12-12 305
axios二次封装主要做的就是让项目更具有模块化，方便项目更好的去迭代更新，并且添加一些更多的功能去优化项目中的性能。 数据存储不需要一直向后端重复去拿取数据。 一个相当于防抖的功能，防止重复去请求接口
axios封装 —— 数据缓存、防止重复请求、动态加载
晓枫
04-10 3255
不是讲解文章，需要有axios使用基础 axios封装，数据缓存、防止重复请求、动态加载
axios请求本地json文件304
05-30
当使用 Axios 请求本地 JSON 文件时，有可能会遇到 304 Not Modified 状态码的响应。这是因为浏览器在请求静态资源时，会在本地缓存中查找该资源，如果缓存中已经有该资源的副本并且其 ETag 没有发生变化，则服务器会返回 304 状态码，并告诉浏览器可以直接使用本地缓存中的资源。 为了避免这种情况的发生，我们可以在 Axios 请求时添加一些配置项，强制让浏览器每次都向服务器发送请求，而不是从本地缓存中获取资源。具体方法如下： ```javascript axios.get('data.json', { headers: { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' } }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` 在上述代码中，我们向 Axios 的 get 方法中添加了 headers 配置项，该配置项中包含了两个属性：Cache-Control 和 Pragma。这两个属性会告诉浏览器不要使用缓存，而是每次都向服务器发送请求。 另外，我们也可以在服务器端设置响应头，告诉浏览器不要缓存该资源。具体方法如下（以 Node.js 为例）： ```javascript const express = require('express'); const app = express(); app.get('/data.json', (req, res) => { res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Pragma', 'no-cache'); res.sendFile(__dirname + '/data.json'); }); app.listen(3000, () => { console.log('Server is listening on port 3000'); }); ``` 在上述代码中，我们在服务器端设置了两个响应头：Cache-Control 和 Pragma，与前面的 Axios 配置项相同。这样浏览器每次请求该资源时，服务器都会返回一个新的响应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值