在边缘函数中使用 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,即可预览到示例效果。
未命中缓存。

命中缓存。
