JavaScript 中 fetch 怎么实现请求结果的内存缓存机制-js教程-PHP中文网

fetch本身不提供内存缓存，但可用map或weakmap手动实现：拦截请求、查缓存、命中则返回promise，未命中则发起请求并存入带ttl的缓存，仅适用于幂等get请求。

javascript 中 fetch 怎么实现请求结果的内存缓存机制

fetch 本身不提供内存缓存，但你可以用 Map 或 WeakMap 手动实现一个轻量、高效的内存缓存层，核心是拦截请求、查缓存、命中则返回缓存结果，未命中则发起真实请求并存入缓存。

用 Map 实现基础内存缓存

适合多数场景：键为请求 URL + method + JSON.stringify(body)，值为 Promise（避免重复请求）。

缓存的是 Promise 对象，不是响应体，防止并发重复请求
URL 和参数需标准化（如统一 query 排序、去除空参），否则相同逻辑请求可能缓存不命中
建议加 TTL（过期时间），避免无限增长；可用 setTimeout 清理，或封装成带过期的 Cache 类

封装一个可复用的缓存 fetch 函数

示例代码结构清晰，支持 GET/POST、自动序列化 key、简单过期控制：

Alibabacloud Sdk Client Initialization For Java

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

下载

const memoryCache = new Map();
const CACHE_TTL = 5 * 60 * 1000; // 5 分钟
<p>async function cachedFetch(input, init = {}) {
const method = (init.method || 'GET').toUpperCase();
const url = typeof input === 'string' ? input : input.toString();
const cacheKey = [method, url, JSON.stringify(init.body || null)].join('|');</p><p>const cached = memoryCache.get(cacheKey);
if (cached) {
if (Date.now() </p><p>const promise = fetch(input, init).then(res => res.clone());
memoryCache.set(cacheKey, {
promise,
expires: Date.now() + CACHE_TTL
});</p><p>return promise;
}</p>