Javascript 如何通过PostMessage以Blob的形式返回Serviceworker响应正文ReadableByTestStream？

我在Chrome中使用postMessage在网页和serviceworker之间进行通信。通信包括请求和接收文件数据（存储为Blob）

假设我正在存储这样一个Blob：

// param.name = "http://foo.css",
// param.content = new Blob(
//   ["span%2C%20div%20%7Bborder%3A%201px%20solid%20red%20!important%3B%7D"],
//   {type: "text/css"}
// )

caches.open(CURRENT_CACHE)
    .then(function(cache) {
      request = new Request(param.name, {mode: 'no-cors'}),
      response = new Response(param.content);
      cache.put(request, response)
        .then(function() {
          event.ports[0].postMessage({
            error: null
          });
        });

这可以正确地存储文件，我可以使用fetch（）正确地检索它，而不是从网络请求它。但是如果我像这样使用match（）方法：

caches.open(CURRENT_CACHE)
  .then(function(cache) {
    return cache.match(param.name)
      .then(function(response) {
        return response.clone().blob();
      })
      .then(function (converted_response) {
        if (converted_response) {
          event.ports[0].postMessage({
            error: null,
            data: converted_response
          });
        } else {
          event.ports[0].postMessage({
            error: {
              'status': 404,
              'message': 'Item not found in cache.'
            }
          });
        }
      });

我在响应中收到了ReadableByTestStream。body中的一个ReadableByTestStream，我被它困住了，不知道如何提取内容并通过postMessage传回

我目前正试图克隆（）根据的响应，因为仅通过postMessage返回完整响应将失败，抛出DataCloneError:Failed to execute postMessage on MessagePort，我也找不到大量相关信息

如果我克隆，我可以调用blob，给我一个新的（？）blob，然后我可以传回，但在尝试读取时只返回未定义：

var r = new FileReader()
return r.readAsText(my_blob);

如果您想尝试一下自己：

要在ServiceWorker中存储文件，请在其inspector控制台中运行以下命令：

caches.keys()
  .then(function (list) {return caches.open(list[0])})
  .then(function (cache) 
      request = new Request("http://foo.css", {mode: 'no-cors'}),
      response = new Response(new Blob(
        ["span%2C%20div%20%7Bborder%3A%201px%20solid%20red%20!important%3B%7D"],
        {type: "text/css"}
      ));
      cache.put(request, response)
        .then(function() {
          event.ports[0].postMessage({
            error: null
          });
        });
    })
    .catch(function(error) {
      event.ports[0].postMessage({
        error: {'message': error.toString()}
      });
    });

要检索：

caches.keys()
  .then(function (list) {return caches.open(list[0])})
  .then(function (cache) {return cache.match("http://foo.css")})
  .then(function(answer) {
     console.log(answer.body);
     var b = response.body;
     return answer.clone().blob();
   })
  .then(function (x) {
      console.log(x);
      var r = new FileReader();
      return r.readAsText(x)
  })
  .then(function (y) {
    console.log("DONE");
    // undefined
    console.log(y);
  })

问题： 如何处理ReadableByTestStream并将其内容/mime类型提取为Blob，以便我可以将其传递回postMessage？谢谢

如果我克隆，我可以调用blob，给我一个新的（？）blob，然后我可以传回，但在尝试读取时只返回未定义：

var r = new FileReader()
return r.readAsText(my_blob);

那是因为你没有正确使用。必须在文件读取器的

onload

属性中附加回调，并在调用回调时解析承诺。我的意思是，不是：

.then(function (x) {
  console.log(x);
  var r = new FileReader();
  return r.readAsText(x)
})

使用：

问题：如何处理ReadableByTestStream并将其内容/mime类型提取为Blob，以便我可以通过postMessage将其传回，有什么提示吗？谢谢

要提取其mime类型，只需从blob对象中读取属性

.then(function (x) {
  console.log(x.type); // <-- the mime type
  return new Promise(function (resolve) {
    var r = new FileReader();
    r.onload = resolve;
    r.readAsText(x);
  });
})

。然后（函数（x）{
console.log（x.type）；//这一点很好。这起作用了，我正在获取我要查找的内容。唯一的问题是mime类型在我的match（）调用中正确地作为头返回，但我无法将其传递到blob（）中谢谢你，我以一个可读的blob结束，但是缺少mime类型声明。还有一个问题。谢谢你的帮助
.then(function (x) {
  console.log(x.type); // <-- the mime type
  return new Promise(function (resolve) {
    var r = new FileReader();
    r.onload = resolve;
    r.readAsText(x);
  });
})