如何从 webworker 接收 JSON 对象

Question

您好，我遇到了从 Web Worker 检索 JSON 对象的问题，我能够收到类似 [object Object] 的东西，它不是 JSON 对象。以下是我的代码。

main.js 文件

if (window.Worker) { // Check if Browser supports the Worker api.
    var worker;
    try {
         worker = new Worker("worker-data.js");
         worker.postMessage([{"data": [{"data1":30},{"data2":40},{"data3":3}]}]);
    } catch(error){
        console.log(error)
    }
}

worker-data.js文件代码

onmessage = function(message) {
    console.log(message.data);
}

我收到的输出：- 预期输出：- 抱歉图像对齐。

Answer 1

您正在 post 消息中传递一个对象数组

worker.postMessage([{"data": [{"data1":30},{"data2":40},{"data3":3}]}]);

您的对象数组在消息的数据属性中 message.data 但是你访问的全错了，尝试访问 message.data

的第一个索引

message.data[0] 其中包含您的对象 {"data": [{"data1":30},{"data2":40},{"data3":3}]}

使用message.data[0].data访问对象的数据

[{"data1":30},{"data2":40},{"data3":3}]

解释：

无论您在 worker.postMessage 中传递什么，都将与 message 的其他属性一起出现在 message.data 中，这里您传递的是一个数组，因此您需要访问第一个索引获取数据的数组

message.data[0] 然后访问你传递给对象的数据 message.data[0].data

在您的消息中

 onmessage = function(message) {
    console.log(message.data[0].data);
    console.log(message.data[0].data[0].data1);
    console.log(message.data[0].data[1].data2);
    console.log(message.data[0].data[2].data3); 
 };

或

仅传递对象

worker.postMessage({"data": [{"data1":30},{"data2":40},{"data3":3}]});

然后在您的消息中以 message.data.data

访问数据

onmessage = function(message) {
        console.log(message.data.data);
        console.log(message.data.data[0].data1);
        console.log(message.data.data[1].data2);
        console.log(message.data.data[2].data3); 
     };

这是您更新后的 fiddle https://jsfiddle.net/d7b680je/1/

片段

检查代码段的控制台以获取输出。

try {

  var ww = document.querySelector('script[type="text/ww"]'),
    code = ww.textContent,
    blob = new Blob([code], {
      type: 'text/javascript'
    }),
    blobUrl = URL.createObjectURL(blob),
    worker = new Worker(blobUrl);
  let temp = {
    "dataVal": [{
      "data1": 30
    }, {
      "data2": 40
    }, {
      "data3": 3
    }, {
      "data4": 10
    }, {
      "data5": 130
    }, {
      "data6": 140
    }]
  };
  worker.postMessage(temp);

} catch (ex) {
  alert(ex);
}

<script type="text/ww">
  self.onmessage = function(message) { console.log(message.data.dataVal); console.log(message.data.dataVal[0].data1); console.log(message.data.dataVal[1].data2); console.log(message.data.dataVal[2].data3); };
</script>

我建议您删除所有数组并将数据作为对象传递

检查这个 fiddle https://jsfiddle.net/d7b680je/2/

try {

  var ww = document.querySelector('script[type="text/ww"]'),
    code = ww.textContent,
    blob = new Blob([code], {
      type: 'text/javascript'
    }),
    blobUrl = URL.createObjectURL(blob),
    worker = new Worker(blobUrl);
  let temp = {
    "dataVal": {
      "data1": 30,
      "data2": 40,
      "data3": 3,
      "data4": 10,
      "data5": 130,
      "data6": 140
    }
  };
  worker.postMessage(temp);

} catch (ex) {
  alert(ex);
}

<script type="text/ww">
   self.onmessage = function(message) {
        console.log(message.data.dataVal.data1);
        console.log(message.data.dataVal.data2);
        console.log(message.data.dataVal.data3); 
     };
</script>

上述代码段的控制台日志和 mac safari 中的 fiddle

Answer 2

JSON.stringify() 用于将值转换为有效的 JSON 字符串。然后在另一边你可以 JSON.parse() 取回原始值。 MDN documentation

如何从 webworker 接收 JSON 对象

How to receive JSON object from a webworker

javascript

web-worker