JavaScript 中 Ajax 怎么结合浏览器缓存策略避免重复发送相同的查询请求-js教程-PHP中文网

javascript无法直接控制http强缓存，但可通过浏览器原生缓存（如cache-control、etag）优先处理get查询，辅以localstorage实现应用级缓存，并用pending map或abortcontroller进行请求去重。

javascript 中 ajax 怎么结合浏览器缓存策略避免重复发送相同的查询请求

JavaScript 本身不能直接控制浏览器的 HTTP 强缓存（如 Cache-Control 或 Expires），但可以通过合理组合浏览器原生缓存机制与客户端主动管理策略，有效避免重复发送相同查询请求。关键在于：区分「可缓存的 GET 查询」和「不可缓存的业务操作」，再分层设计——优先走浏览器缓存，其次用 JS 主动拦截+本地存储兜底。

利用浏览器原生缓存机制（GET 请求首选）

对纯查询类 GET 接口（如获取配置、列表、静态资源），后端应正确设置响应头：

Cache-Control: public, max-age=3600 —— 允许浏览器和中间代理缓存 1 小时
ETag / Last-Modified —— 配合 If-None-Match 或 If-Modified-Since 实现协商缓存，服务端可返回 304，不传输响应体
确保 URL 稳定且含语义参数（如 /api/users?role=admin&page=1），避免随机 query（如 ts=123456）破坏缓存命中

前端无需额外代码，fetch 或 XMLHttpRequest 均会自动遵循这些规则。只要请求方法是 GET、URL 相同、缓存头有效，第二次请求将直接从内存或磁盘读取。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

用 localStorage + 时间戳实现应用级缓存（补充强缓存不足）

当后端无法控制缓存头（如第三方 API）、或需更精细的过期逻辑（如按用户登录态隔离），可用 localStorage 手动管理：

请求前拼接唯一 key（如 cache_${url}_${JSON.stringify(params)}）
读取时解析 JSON，检查 expires 时间戳是否大于 Date.now()
仅对低频、低敏感数据启用（如城市列表、APP 版本信息），TTL 建议设为 15 分钟～24 小时
POST/PUT/DELETE 请求不适用此方案，因其语义上不应被缓存

防止同一时刻多次发起相同请求（请求去重）

缓存解决的是「时间维度」的重复，而请求去重解决的是「并发维度」的重复（如快速点击、连点筛选）：

维护一个 Map 记录正在 pending 的请求 key（如 GET:/api/search?q=js）
新请求发出前，先查 Map：若已存在 pending 请求，可选择「取消旧请求」（适合搜索场景）或「复用旧 Promise」（适合只取最新结果）
Axios 用户推荐用 CancelToken 或 AbortController（现代 fetch 支持）实现取消；原生 fetch 可用 signal 选项