帮你快速理解、总结文档立即下载

Cache API 使用

最近更新时间:2026-11-02 10:33:07
本文档已由 AI 辅助审校
我的收藏
在边缘函数中使用 Cache API 读写边缘函数独立缓存:以携带 eo.cacheKey 的 Request 作为缓存键,缓存未命中时回源获取远程资源并写入缓存(缓存时长 10 秒),命中时直接返回缓存内容;可通过响应头 x-edgefunctions-cache 判断是否命中缓存。
说明:
读、写、删需使用同一个指定了 eo.cacheKey 的 Request 对象;未携带 eo.cacheKey 时,写入会被拒绝并抛出 forbidden cdn cache 错误,详见 Cache API。
如需判断某资源是否已被 EdgeOne 站点缓存,请使用以目标资源 URL 新建的 Request 进行匹配(建议不携带任何客户端请求头),详见 Cache API 的 match 小节。

示例代码

const RESOURCE_URL = 'https://static.cloudcachetci.com/qcloud/main/scripts/release/common/vendors/jquery-3.2.1.min.js';

async function fetchResource(event, request, cache) {
// 缓存未命中:回源获取资源,并写入边缘函数独立缓存
const response = await fetch(RESOURCE_URL);
response.headers.set('Cache-Control', 's-maxage=10');
event.waitUntil(cache.put(request, response.clone()));
response.headers.append('x-edgefunctions-cache', 'miss');
return response;
}

async function handleEvent(event) {
const cache = caches.default;

// 读、写、删使用同一个指定了 eo.cacheKey 的 Request 对象
const request = new Request(RESOURCE_URL, {
eo: { cacheKey: 'jquery-v1' },
});

try {
let response = await cache.match(request);
if (!response) {
return fetchResource(event, request, cache);
}
response.headers.append('x-edgefunctions-cache', 'hit');
return response;
} catch (e) {
// 缓存过期(504)或异常:删除后重新回源并写入
try {
await cache.delete(request);
} catch {}
return fetchResource(event, request, cache);
}
}

addEventListener('fetch', (event) => {
event.respondWith(handleEvent(event));
});

示例预览

在浏览器地址栏中输入匹配到边缘函数触发规则的 URL,即可预览到示例效果。
未命中缓存。

命中缓存。


相关参考