如何使用JavaScript读取Cache缓存中存储的响应体内容

问题场景 #

Node.js项目开发过程中需要将部分数据存入缓存，目前请求已成功写入缓存，写入实现代码如下：

const version = "3.4.3";
caches.open('v' + version)
.then(async cache => {
    await cache.add('/getTranslations');
    const data = await cache.match('/getTranslations');
});

对应/getTranslations接口的返回逻辑如下：

app.get("/getTranslations", (req, res) => {
            res.status(200).send(/*此处为需要从缓存中读取的目标对象数据*/);
});

Chrome浏览器缓存面板中可看到对应缓存条目，但执行读取代码时，仅能匹配到/getTranslations对应的请求条目，无法获取实际响应数据，使用的读取代码如下：

// 本次使用的缓存名称为'v4'
const c = await caches.open('v4');

// 可查询到缓存内共存在7条请求记录
await c.keys()

// 可匹配到/getTranslations对应的请求条目，但无法获取到目标响应数据
await c.match('/getTranslations')

核心原因 #

caches.match()的返回值是标准的Response实例，不会直接返回响应体内存储的业务数据，必须主动调用Response对象上内置的解析方法，才能拿到实际的响应内容。

正确读取方案 #

根据接口返回的数据格式，调用Response实例对应的解析方法即可拿到目标数据，常用解析方法对应场景如下：

• 接口返回JSON结构对象：调用response.json()
• 接口返回纯文本内容：调用response.text()
• 接口返回二进制资源（图片、文件、流数据等）：调用response.blob()或response.arrayBuffer()

当前场景下接口返回的是对象数据，使用json()方法解析即可，完整可运行代码如下：

const c = await caches.open('v4');
// 匹配路径对应的缓存响应对象
const response = await c.match('/getTranslations');

// 先做异常校验，避免缓存不存在或响应状态错误时解析失败
if (!response || !response.ok) {
  console.log('对应缓存条目不存在或响应状态异常');
  return;
}

// 解析JSON格式响应体，拿到实际存储的业务数据
const cachedData = await response.json();
console.log('读取到的缓存数据：', cachedData);

常见踩坑点 #

• Response对象的响应体是单向流结构，仅支持读取一次。如果需要多次使用响应内容，要么把解析后的数据存入变量复用，要么在第一次读取前调用response.clone()创建响应副本，再对副本做解析
• 默认的缓存匹配规则不会严格校验查询参数、请求头差异，如果同路径下存在多个不同参数的请求，建议传入完整请求URL做匹配，避免拿到错误的缓存条目
• 如果是手动调用cache.put()方法写入缓存，需要提前过滤非200状态的异常响应，否则错误响应会被存入缓存，后续解析时会报错

内容的提问来源于stack exchange，提问作者Dropen77