从promise to async()块返回一个经过修改的对象

Question

我启动了一个webworker(计算游戏中的命中率)，并在webworker完成计算后返回结果(总是一个数组)。

在promise的末尾，我尝试在then(之后返回对象，并在主线程中执行：

(async () => {
// Wait computeHit function
await computeHit(HitCurrent, 'computer');

但当computeHit所做的计算较高时，promise中的return HitCurrent与(async () =>块中的HitCurrent = await选项之间似乎存在冲突。

下面的代码更清楚：

背景包括：

1) webworker 的使用

2) promise 的使用

3) async/await关键字

承诺区块：

function computeHit(HitCurrent, mode) {
if (mode == 'computer') {
let HitTemp = JSON.parse(JSON.stringify(HitCurrent));
return new Promise( resolve => {
// Creation of webworker
firstWorker = new Worker(workerScript);
firstWorker.onmessage = function (event) {
resolve(event.data);
}
// Post current copy of HitCurrent, i.e HitCurrent
firstWorker.postMessage([HitTemp, HitTemp.playerCurrent, maxNodes]);
}).then(({result}) => {
// Get back game board of webworker
HitTemp = result.HitResult;
// Get back suggested hit computed by webworker
[a,b] = HitTemp.coordPlayable;
// Drawing all lines from suggested hit (in 8 directions)
// HERE, we modify HitCurrent attributes (like array)
for (k = 0; k < 8; k++) {
exploreHitLine(HitCurrent, a, b, k, 'drawing');
}
// Remove playable hits
cleanHits('playable', HitCurrent);
// Display current game
displayCurrentHit(HitCurrent);
// Return object HitCurrent
return HitCurrent;
})}
} 

上面等待promise的异步块是：

(async () => {
// Wait computeHit function and update HitCurrent when promise is done
HitCurrent = await computeHit(HitCurrent, 'computer');
// Reset, switch and update
resetSwitchUpdate(HitCurrent, false);
})();

一旦webworker收到结果(一个值和一个对象HitResult)，我想得到更新的HitCurrent对象(正如我所说的修改为exploreHitLine(HitCurrent, a, b, k, 'drawing');)。

我不知道如何使await computeHit(HitCurrent, 'computer');的行为和我应用Promise的结束的返回，即：

return HitCurrent;

什么是校正解决方案？：

1) 做：

(async () => { // Wait computeHit function and update HitCurrent when promise is done await computeHit(HitCurrent, 'computer');

带入Promise:

return HitCurrent;

2) 做：

(async () => { // Wait computeHit function and update HitCurrent when promise is done Object = await computeHit(HitCurrent, 'computer');

带入Promise:

return HitCurrent;

---

对于2)情况，如果这是解决方案，我如何从局部变量Object中取回Hitcurrent对象我看到结果可能是包装

我认为重要的一点是，返回promise不同于返回像HitCurrent这样的Object，不是吗

目前，对于webworker中的轻度计算，本文代码部分给出的解决方案运行良好，但一旦我对webworker有了较高的计算量，代码就会终止游戏，而不会对用户点击进行更多交互(我在游戏板上点击鼠标)。

因此，我想得到在所有情况下从Promise块中取回对象HitCurrent的建议，以实现webworker的轻计算和高计算。

Answer 1

好吧，看了这个演示之后，我想我明白了它可能会崩溃的原因。。

对于游戏模式(用户/计算机等)，您有currentGame函数，其中包含多个情况，对于计算机模式，您正在调用返回promise的函数。问题是promise被包装在立即调用的函数中，这意味着它下面的代码不会等待并继续执行。

为了说明我的意思，这里有一个例子：

var testPriomise = () => new Promise(resolve => { resolve(2)})
console.log('1');
(async() => {
var result = await testPriomise();
console.log(result)
})()
console.log('Look! I fire before 2!', 3)

若您在控制台中运行它，您会注意到它会记录1、3，然后只记录2。我希望你能看到我的打算：)

进行以下几项更改：代替

// Main game function : started with white player
function currentGame(HitCurrent) {

进行

// Main game function : started with white player
async function currentGame(HitCurrent) {

对于您的计算机模式案例，请执行以下操作：

// Play computer hit
else {
// First option : Wait computeHit function
await computeHit(HitCurrent, 'computer');
// Reset, switch and update
resetSwitchUpdate(HitCurrent, false);
}

这样可以确保resetSwitchUpdate已经更新了HitCurrent对象。

我希望这能解决问题！