服务工作人员未能使用克隆()将获取的响应保存到cacheStorage中

Question

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

我收到的错误消息：

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

屏幕截图：这里

下面是我代码的一部分：

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

我认为返回是在执行fetch之前被调用的，因此下面的错误被返回。

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

          return fetchedResponse;
        })