注意:说明:
一、示例代码
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,即可预览到示例效果。
·未命中缓存。
·命中缓存。
三、相关参考
·Runtime APIs: Cache
·Runtime APIs: Fetch
·Runtime APIs: FetchEvent
·Runtime APIs: Response