Javascript WebWorker-异步/等待

Question

我正在尝试卸载长时间运行的进程，该进程阻塞了我的UI。

WebWorker方法似乎是解决这种情况的最佳方法。

但是，我需要使用的一个库具有async / await。

WebWorker具有受限的JS API，并且似乎没有异步/等待。

有没有办法在WebWorker中使用Promises？

错误

ReferenceError：__awaiter未定义

问候，

丹尼尔

更新：

添加__awaiter导致无法识别Promise。

var __awaiter =
        (this && this.__awaiter) ||
        function(thisArg, _arguments, Promise, generator) {
            return new Promise(function(resolve, reject) {
                generator = generator.call(thisArg, _arguments);
                function cast(value) {
                    return value instanceof Promise && value.constructor === Promise
                        ? value
                        : new Promise(function(resolve) {
                                resolve(value);
                          });
                }
                function onfulfill(value) {
                    try {
                        step('next', value);
                    } catch (e) {
                        reject(e);
                    }
                }
                function onreject(value) {
                    try {
                        step('throw', value);
                    } catch (e) {
                        reject(e);
                    }
                }
                function step(verb, value) {
                    var result = generator[verb](value);
                    result.done
                        ? resolve(result.value)
                        : cast(result.value).then(onfulfill, onreject);
                }
                step('next', void 0);
            });
        }

这是有关Web worker构造方式的基本代码。

/* eslint-disable */
export default function ModelWorker() {
  this.window = this

  onmessage = async (e) => {
    console.log(e);
  }
}

WorkerProxy.js

export default class WorkerProxy {
  constructor(worker) {
    const code = worker.toString()
    const src = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'))
    const blob = new Blob([src], { type: 'application/javascript' })
    return new Worker(URL.createObjectURL(blob))
  }
}

SomeComponent.js

import WorkerProxy from './WorkerProxy'
import ModelWorker from './ModelWorker'


if (!!window.Worker) {
  const worker = new WorkerProxy(ModelWorker)
  worker.addEventListener('message', e => console.log(e.data))
  worker.postMessage({ message:message })
  // Load labels, etc.
}

Answer 1

async / await是ECMAScript语言的一部分，它们在所有全局范围内可用，包括Window，Web Worker，Service Worker，Audio Worklet，Paint Worklet等。

这些范围可能没有的是一些Web API，例如DOM API，MediaDevices API，Geolocation API等。 但是，只要浏览器支持此ECMAScript功能，所有作用域都将起作用。

因此，我无法确定您的问题是什么，但是绝对可以在Worker中使用Promises和async / await。

 const worker = new Worker( URL.createObjectURL( new Blob([worker_script.textContent]) ) ); worker.onmessage = ({data}) => console.log(data); 

 <script type="worker-script" id="worker_script"> (async function() { postMessage(['starting', performance.now()]); await wait(2000); postMessage(['ended', performance.now()]); })(); function wait(time) { return new Promise((res)=>setTimeout(res, time)); } </script>