如何在 class 中将异步 javascript 代码与网络工作者一起使用

Question

我写了一个 javascript class，它在实例化时创建了一个 web worker。此 class 中的另一种方法运行 worker。我想调用方法运行 worker 然后异步地做一些事情。为了更好地理解，我在下面添加了一个示意代码框架。

我试图生成一个 Promise 并将其存储在一个 class 变量中，然后对其进行操作，但它似乎是一个错误的 ansatz。 Link 到 JS Bin.

class Task{
  constructor(){
    this.data = 0;
    //this.listen; //my idea, does not work
    this.worker = new Worker('worker.js');

    this.worker.onmessage = (function(e){
      // worker constantly emits messages
      let data = e.data.split(' ');
      // suppose message is now availabe as array
      this.data = data;

      if(data.includes("trigger")){
        //trigger signals that the heavy computation is over

        /* my idea didn't work:
        *this.listen = Promise.resolve(1);
        */
      }
    }).bind(this);
  }

  async doTask(){
    this.worker.postMessage("start computation");
    //wait for the worker to finish calculation
    /*my idea
    *await this.listen;
    */

    //do something after trigger was sent
    return 0;
  }
}

Answer 1

也许是这样的？

class Task{
  constructor(){
    this.data = 0;
    this.worker = new Worker('worker.js');
  }
  async calculation() {
    if (this.worker.onmessage === null) {
      return new Promise(resolve => {
        this.worker.onmessage = e => {
          let data = e.data.split(' ');
          // suppose message is now availabe as array
          this.data = data;

          if(data.includes("trigger")){
            this.worker.onmessage = null;
            resolve();
          }
        };
        this.worker.postMessage("start computation");
      });
    } else {
      console.log('One calc at a time please...');
    }
  }
  async doTask(){
    await this.calculation();

    //do something after trigger was sent
    return 0;
  }
}

如何在 class 中将异步 javascript 代码与网络工作者一起使用

How to use asynchronous javascript code with web workers in a class

javascript

asynchronous

web-worker