Question

当我调用下面的代码片段中定义的asyncFunc时，我尝试处理promise的返回，以便获得阻止行为。在此功能中，我正在使用Webworker。

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

目标是一旦 webworker在此处接收到要绘制的数组（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在其中接受一个函数回调，当承诺被解决时调用。

因此，您的代码如下：

// 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()'));

相反，为了以“同步方式”编写代码，您可以通过以下方式使用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处理异步功能

1 个答案: