Service Worker 无法使用 clone() 将获取的响应保存到 cacheStorage

Question

我使用 clone() 创建响应对象的克隆。然后将其存储到缓存存储中。但是当服务工作者想要存储获取结果的响应时，我收到了错误消息。我是否使用了 service worker 或以错误的方式克隆了响应？

我收到的错误消息：

Uncaught (in promise) TypeError: Failed to execute 'clone' on 'Response': Response body is already used

屏幕截图： here

这是我的部分代码：

self.addEventListener("fetch", function(event) {
  // Get asset from cacheStorage first.
  // If it's not cached. Fetch it and cache it.
  event.respondWith(
    caches.match(event.request).then(function(cachedResponse) {
      return (
        cachedResponse ||
        fetch(event.request).then(function(fetchedResponse) {
          console.log(event.request.url);
          caches.open(cacheVersion).then(function(cache) {
            cache.put(event.request, fetchedResponse.clone());
          });

          return fetchedResponse;
        })
      );
    })
  );
}

完整代码： https://github.com/wtlin1228/service-worker/tree/master

Answer 1

我认为 return 在执行 fetch 之前被调用所以下面的错误是 returned.

 fetch(event.request).then(function(fetchedResponse) {
          let fetchedResponses = fetchedResponse.clone();
          caches.open(cacheVersion).then((cache) => {
              cache.put(event.request, fetchedResponses);
          });

          return fetchedResponse;
        })

Service Worker 无法使用 clone() 将获取的响应保存到 cacheStorage

Service worker failed to save fetched response into cacheStorage with clone()

javascript

caching

response

fetch

service-worker