如何通过HTML的Request的clone方法复制请求对象用于缓存与网络的并行策略-html教程-PHP中文网

request.clone() 不能直接用于 network first，因为其仅复制请求结构而不复制请求体的可读流，post等含body请求的body被fetch消费后不可重放，get请求虽无body但仍需clone以支持缓存写入；必须对get请求守卫并配对使用request.clone()与response.clone()，否则cache.put会静默失败或写入空响应。

如何通过html的request的clone方法复制请求对象用于缓存与网络的并行策略

Request.clone() 为什么不能直接用于 Network First？

因为 Request.clone() 只复制请求结构，不复制请求体（body）的可读流——一旦你用 fetch(request) 消费了原始 request.body（比如 POST 请求），再调用 request.clone() 会抛出 TypeError: Failed to execute 'clone' on 'Request': Request body is already used。GET 请求虽无 body，但 clone 仍有必要，因为 fetch 后 response 流只能读一次，缓存时需靠 request 副本写入 cache。

只对 GET 请求 clone 才安全

POST/PUT/DELETE 等含 body 的请求，request.body 是 ReadableStream，被 fetch() 消费后不可重放。即使你提前 request.clone()，后续仍需手动读取并重建 body（如 await request.arrayBuffer()），极易出错且破坏幂等性。所以：

必须加守卫：if (request.method !== 'GET') return;
GET 请求可放心 const reqForCache = request.clone();，它不消耗流，也不触发副作用
不要对带 Content-Type: application/json 的请求尝试 clone + 重发——这不是缓存策略该干的事

clone() 和 cache.put() 必须配对使用

Service Worker 缓存写入依赖 cache.put(request, response)，而 response 只能被消费一次。如果你先用 fetch(request) 得到响应，又想缓存它，就得在 response.clone() 之后，用一个**未被消费的 request 副本**去存——否则 cache.put() 会静默失败或写入空响应。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确顺序是：

先 const cacheReq = request.clone();
再 fetch(request) 获取响应
成功后 response.clone() 生成两个副本：一个返回给页面，一个传给 cache.put(cacheReq, clonedResponse)
漏掉任一 clone，缓存就会写空或报 TypeError: Response body is already consumed

实际代码里最容易漏掉的三处 clone

下面这段常见实现，缺了任意一个 clone() 都会导致缓存失效或白屏：

self.addEventListener('fetch', event => {
  const request = event.request;
  if (request.method !== 'GET') return;

  const cacheReq = request.clone(); // ← 1. request 本身要 clone

  event.respondWith(
    fetch(request)
      .then(response => {
        const cachedResponse = response.clone(); // ← 2. response 必须 clone
        caches.open('api-cache').then(cache =>
          cache.put(cacheReq, cachedResponse) // ← 用克隆后的 request 写入
        );
        return response; // ← 返回原始 response（已被消费，不能再用）
      })
      .catch(() => caches.match(request)) // ← 3. 这里 request 还能用，但若前面没 clone 就已失效
  );
});

真正容易被忽略的是：clone 不是“多此一举”，而是流式 API 的底层契约——没有它，缓存与网络就无法真正并行，你写的“Network First”实际只是“Network Only”。