使用 webworker 和 promise 处理异步函数

Question

我尝试处理 return 的承诺，以便在我调用下面的代码片段中定义的 asyncFunc 时获得阻塞行为。在这个函数中，我使用了一个 webworker。

我不是 JavaScript 方面的专家，promise 的概念对我来说是新的。我试图在我的代码块中定义一个 asyncFunc 函数。如果我之后调用这个函数，我通常应该完全执行 asyncFunc 中的代码（但我不确定）。

目标是在 webworker 收到要绘制的数组后绘制 canvas（当前代表游戏板） (HitCurrentvariable)在这里，即以同步方式（绘图功能由displayCurrentHit(HitCurrent)执行）。

else if (mode == 'computer') {
    // Call asynchronous function with promise
    function asyncFunc(HitCurrent) {
        // Return promise
        return new Promise( resolve => {
            // Creation of webworker
            let firstWorker = new Worker(workerScript);
            firstWorker.onmessage = function (event) {
                resolve(event.data);
            }   
            // Post current copy of HitCurrent, i.e HitCurrent
            firstWorker.postMessage([HitCurrent, HitCurrent.playerCurrent, maxNodes]);
        }).then(({result}) => {
            // Get back game board of webworker
            HitCurrent = result.HitResult;
            // Get back suggested hit computed by webworker
            [a,b] = HitCurrent.coordPlayable;
            console.log('Into promise : coordPlayable : (a,b) = ',a,b);
            // Drawing all lines from suggested hit (in 8 directions)
            for (k = 0; k < 8; k++) {
               exploreHitLine(HitCurrent, a, b, k, 'drawing');
            }   
            // Remove playable hits
            cleanHits('playable', HitCurrent);
            // Display current game
            displayCurrentHit(HitCurrent);
            // Up to there, first computer hit is good 
            // and game board is well drawn
            alert('Stop just after displayCurrentHit');
        })
    } 
    // Call asyncFunc : blocking ???
    asyncFunc(HitCurrent).then(console.log('Call async function'));
    // Prove asynchronuous of asyncFunc call
    alert('after asynFunc().then');
}

asyncFunc 的调用没有阻塞。如何使用 Promise 概念以同步方式显示当前游戏板？

Answer 1

你的承诺语法错误。

.then 接受一个函数回调，当 promise 将被解析时调用。

因此在您的情况下，此代码：

// Call asyncFunc : blocking ???
asyncFunc(HitCurrent).then(console.log('Call async function'));
// Prove asynchronuous of asyncFunc call
alert('after asynFunc().then');

应该是：

asyncFunc(HitCurrent).then(() => alert('after asynFunc()'));

为了在 "sync way" 中编写代码，您可以这样使用 async/await：

function asyncFunc(HitCurrent) {
  // Return promise
  return new Promise(resolve => {
    setTimeout(() => resolve('finished'), 1000);
  }).then(data => {
    alert('promise resolved:' + data);
  })
}

(async () => {
  await asyncFunc();
  alert('after asynFunc().then');
})();

因此您创建了一个异步函数，等待您的承诺得到解决，然后提醒值。

使用 webworker 和 promise 处理异步函数

Handling asynchronous function with webworker and promise

javascript

asynchronous

blocking

promise