如何从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

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

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

您的对象数组位于邮件的data属性中 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.data中与message的其他属性一起存在，此处您传递的是一个数组，因此您需要访问该数据的第一个索引数组来获取数据

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); 
     };

这是您更新的小提琴https://jsfiddle.net/d7b680je/1/

<强>段

检查代码段的控制台是否输出。

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

检查这个小提琴https://jsfiddle.net/d7b680je/2/

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

以上代码段和Mac游戏中的小提琴的控制台日志

Answer 2

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