JavaScript 中怎么缓存 HTTP 请求的数据以提升性能-js教程-PHP中文网

javascript缓存http请求数据的核心是避免重复请求，需按场景选存储（内存/ localstorage / indexeddb / service worker）、统一请求标识、设计时效策略并及时清理。

javascript 中怎么缓存 http 请求的数据以提升性能

JavaScript 中缓存 HTTP 请求数据，核心是“避免重复发请求”，把已获取的结果存起来，下次直接读取。关键不在于用哪个 API，而在于选对存储位置、定好缓存逻辑、管住过期和更新。

按场景选存储方式

不同需求对应不同存储介质：

临时高频读取（如页面内多次调用同一接口）：用 Map 或普通对象存在内存里。速度快，但刷新就丢，适合配置类、下拉选项等不变或短时不变的数据。
需要跨会话保留（如用户偏好、离线可用的字典）：用 localStorage。记得手动加过期时间字段，因为 localStorage 本身不支持自动失效。
要存大量结构化数据或支持索引查询（如离线文章列表、历史记录）：用 IndexedDB。异步、容量大、功能全，但写法稍复杂。
想彻底接管网络请求、支持离线、精细控制缓存策略（如 PWA）：必须上 Service Worker + Cache API。它能拦截所有 fetch 请求，实现缓存优先、网络优先等灵活策略。

给每个请求打唯一“身份证”

缓存的前提是能准确识别“这是不是同一个请求”。常见做法：

Alibabacloud Sdk Client Initialization For Java

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

下载

GET 请求：用完整的 URL（含查询参数）作 key，最简单可靠。
POST/PUT 等带 body 的请求：需把 method + URL + JSON.stringify(body) 拼接后哈希（如用 SHA-256），避免 key 过长或含特殊字符。
注意区分大小写、空格、编码差异——建议统一 encodeURI 处理 URL，再生成 key。

设计合理的缓存策略

不能缓了就不管，得让缓存“聪明地工作”：

时效性高的数据（如用户余额、订单状态）：不适合缓存，或只缓存几秒，用 max-age=5 这类短周期。
低频更新数据（如城市列表、系统配置）：可缓存数小时甚至一天，配合服务端 ETag 或 Last-Modified 做协商验证。
静态资源（JS/CSS/图片）：靠 HTTP 响应头控制，如 Cache-Control: public, max-age=31536000, immutable，浏览器自动处理，无需 JS 干预。
别忘了清理：用户登出时清掉个人相关缓存；数据更新后主动 cache.delete(key) 或设新版本号重命名 cache name。

一个轻量实用的 fetch 缓存封装示例

适用于中小型项目，基于 Map + 过期时间：

const cache = new Map();
<p>function cachedFetch(url, options = {}) {
const key = url + JSON.stringify(options);
const cached = cache.get(key);</p><p>if (cached && Date.now() </p><p>return fetch(url, options)
.then(res => res.json())
.then(data => {
// 默认缓存 5 分钟，可按需传入 ttl
const expires = Date.now() + (options.ttl || 5 <em> 60 </em> 1000);
cache.set(key, { data, expires });
return data;
});
}</p><p>// 使用
cachedFetch('/api/config', { ttl: 10 <em> 60 </em> 1000 })
.then(config => console.log(config));</p>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南