使用 Vue.Js 在 Web Worker 中正确触发函数答案

【问题标题】：Properly Fire Functions within Web Workers using Vue.Js使用 Vue.Js 在 Web Worker 中正确触发函数
【发布时间】：2019-01-25 14:56:14
【问题描述】：

我试图使用vue-worker 将处理选定输入文件的任务卸载到base64 到后台线程。但是我没有成功。这是我正在尝试的：

 // file is selected file from input
 const getBase64 = (file) => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)
     reader.onload = () => resolve(reader.result)
     reader.onerror = error => reject(error)
   })
 }

this.$worker.run((file, getBase64) => {

  getBase64(file).then((data) => {
     return data
  })

}, [file, getBase64])
.then(result => {
  console.log(result)
})
.catch(e => {
  console.error(e)
})

但是我收到以下错误：

DOMException：无法在“Worker”上执行“postMessage”：函数 getBase64(file) { return new Promise(function (resolve, reject) { var reader = new FileReader();...... } 无法克隆。

这个错误究竟与什么有关？我正在尝试完成的可能是什么？

【问题讨论】：

在 $worker.run 你没有返回 getBase64 函数或任何东西

标签： javascript vue.js web-worker

【解决方案1】：

我没有使用过vue-worker，所以这不是一个确切的答案，但我希望它仍然可以在某种程度上帮助你。

我正在像这样使用worker-loader：

工作脚本 - calc.worker.js

import regress from '@/lib/regression'

// Setup an event listener that will handle messages sent to the worker.
self.addEventListener('message', function(e)
{
  if(e.data && e.data.cmd) switch(e.data.cmd)
  {
    case 1: // regression of combined data
      setTimeout(function()
      {
        combined(e.data);
      },20);
      break;
    case 2: // regressions of individual campaigns
      setTimeout(function()
      {
        individual(e.data);
      },20);
      break;
  }
}, false);

function combined(data)
{
  do_regress(data.regression,data.param,data.outliers);
  self.postMessage(data);
}

function individual(data)
{
  let i;
  for(i=0;i<data.param.length;i++) 
    do_regress(data.regression,data.param[i],data.outliers);
  self.postMessage(data);
}

如何使用来自*.vue 组件的工作脚本

<script>
import CalcWorker from '@/calc.worker.js'

export default
{
  data()
  {
    return {
      worker: new CalcWorker(),
      individual: 0,
      kind: 1,
      regression: [],
      outliers: []
    }
  },
  created()
  {
    // Setup an event listener that will handle messages received from the worker.
    this.worker.addEventListener('message', this.worker_ready, false);
    this.update();
  },
  beforeDestroy: function()
  {
    this.worker.terminate();
  },
  methods:
  {
    update()
    {
      this.worker.postMessage(
      {
        cmd: 2,
        param: this.individual,
        kind: this.kind,
        regression: this.regression,
        outliers: this.outliers
      });
    },
    worker_ready(e)
    {
      switch(e.data.cmd)
      {
        case 1:
          ......
          break;
        case 2:
          ......
          break;
      }
    }
  }
}
</script>

【讨论】：