如何检查多个同步和异步 JavaScript Promise 是否已完成

Question

我是在 javascript 中使用 Promise 的新手，我似乎无法得到（我认为）应该是相当基本的工作的东西。

我正在为回合制游戏编写代码，在玩家的回合中，会发生许多事情，其中​​一些是异步的（例如使用 setInterval 的动画），而有些是普通的同步代码。我想做的是确定玩家回合所需的所有功能何时完成，以便我可以切换到下一个玩家。客户端是纯 HTML5/CSS/JS（使用 canvas API 进行动画），而后端是 PHP 8.1 和 MySQL5.6（以防万一）。

我当前代码的相关功能如下所示：

function performAction() {
  // this is the function that is fired when the player presses a button to perform some action, for example "move 5 tiles"

  // a few hundred lines of code to do stuff client-side like move validation etc.

  drawPlayer(); // we now fire the client-side animation function so that players get instant feedback and don't need to wait for the server response in multi-player games

  // if this is a multi-player online game, we now call a function to fetch data from the server, for example to check if this player is blocked from taking that move
  if (gameType == "remoteHuman") {
    sendAction(data);
    }

  // otherwise, we don't need to contact the server if the player is playing a local AI game and can continue with the remaining actions
  else {
    completeAction(data);
  }
}

function completeAction(data) {
  // this function carries out the remaining tasks required on the client based on either the server response, or being called directly from performAction in local, single-player games

  updateStats(); // update all the player's stats
  textOverlay(); // draw a nice, floaty text overlay that shows some numbers and fades out
}

function updateStats() {
  // this function is maybe a hundred lines of standard, synchronous code that updates player statistics like health etc.

  // we are at the bottom of the code, so the updateStats function has now completed at this point since it's synchronous
}

function drawPlayer() {
  // this function is the main animation function and is called towards the end of function performAction so that the player gets nice, instant response to actions without waiting for server responses etc.

  function animate() {
    // this is the core animation function that performs the canvas API drawing for each frame of an animation

    // if we have finished drawing all the animation frames, then we are OK to clear the timer
    if (currentFrame == frames.length) {
      clearInterval(timer);
      // the drawPlayer function has now completed at this point
    }
  }

  // set up the locally scoped timer to run the animation function every frameDelay (about 20ms) for smooth animations
  var timer = setInterval(function() {
    animate();
  }, frameDelay);
}

function textOverlay() {
  // this function is a canvas drawing function that draws nice floaty text that fades out

  // about a hundred lines of bog standard canvas api code here

  // the actual, asynch drawing code. we delay the text overlay by about 500ms to better synchronise with animation actions first
  setTimeout(function(){
    // then we draw something and slowly reduce the opacity every frameDelay (about 20ms) until the text fades out
    var interval = setInterval(function() {
      // when our alpha is below zero, we know the text isn't on the screen anymore
      if (alpha < 0) {
        clearInterval(interval);
        // the textOverlay function has now completed at this point
      }         
    }, frameDelay);
  }, animationDelay);
}

function sendAction(data) {
  // this function is called from performAction whenever an event needs to be sent to the server in a multiplayer game. bog standard stuff. nothing to see here, move along
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var data = JSON.parse(xhttp.responseText);

      completeAction(data);
    }

  xhttp.open("GET", serverURL + "?data=" + data);
  xhttp.send();
}

我应该注意到上述所有代码都可以完美运行。我需要知道的是，drawPlayer、textOverlay 和 updateStats 函数何时全部完成，而不是将它们链接到 Promise 中，因为我希望它们全部异步运行。我只对所有功能何时完成感兴趣。这些功能永远不会失败，因此不需要错误捕获或失败的响应检查。关于函数的一些统计数据：

• drawPlayer：有一个主要基于setInterval的异步组件。在典型的客户端上需要 200-1000 毫秒才能完成，具体取决于玩家采取的操作
• textOverlay：有一个主要基于 setInterval 的异步组件。在典型的客户端 updateStats 上需要 100-500 毫秒才能完成
• ：纯同步代码。在典型的客户端上可能需要 2-5 毫秒才能完成。但是，该函数必须在回合传递给其他玩家之前完成，因此我需要将其包含在承诺“链”中，即使与绘图/动画函数相比，它是同步的且执行时间短，

这就是我的目的到目前为止已经尝试过：

1. 在调用drawPlayer()之前在performAction中实例化一个promise。然后，在 3 个依赖函数中的每一点，当我确定函数已完成时，我添加一个“then”。下面的代码：

// set up as a global variable so that it can be accessed within any function in my code
var promiseA = new Promise(function(resolve) {
  resolve(value);
  console.log("promiseA created", value);
});

function performAction() {
  // this is the function that is fired when the player presses a button to perform some action, for example "move 5 tiles"

  // a few hundred lines of code to do stuff client-side like move validation etc.

  drawPlayer(); // we now fire the client-side animation function so that players get instant feedback and don't need to wait for the server response in multi-player games

  // if this is a multi-player online game, we now call a function to fetch data from the server, for example to check if this player is blocked from taking that move
  if (gameType == "remoteHuman") {
    sendAction(data);
    }

  // otherwise, we don't need to contact the server if the player is playing a local AI game and can continue with the remaining actions
  else {
    completeAction(data);
  }
}

function completeAction(data) {
  // this function carries out the remaining tasks required on the client based on either the server response, or being called directly from performAction in local, single-player games

  updateStats(); // update all the player's stats
  textOverlay(); // draw a nice, floaty text overlay that shows some numbers and fades out
}

function updateStats() {
  // this function is maybe a hundred lines of standard, synchronous code that updates player statistics like health etc.

  // we are at the bottom of the code, so the updateStats function has now completed at this point since it's synchronous
  gv.promiseA.then(
    function resolve(value) {
      console.log("this function has completed", Date.now() - value);
    }
  );
}

function drawPlayer() {
  // this function is the main animation function and is called towards the end of function performAction so that the player gets nice, instant response to actions without waiting for server responses etc.

  function animate() {
    // this is the core animation function that performs the canvas API drawing for each frame of an animation

    // if we have finished drawing all the animation frames, then we are OK to clear the timer
    if (currentFrame == frames.length) {
      clearInterval(timer);
      // the drawPlayer function has now completed at this point
      gv.promiseA.then(
        function resolve(value) {
          console.log("this function has completed", Date.now() - value);
        }
      );
    }
  }

  // set up the locally scoped timer to run the animation function every frameDelay (about 20ms) for smooth animations
  var timer = setInterval(function() {
    animate();
  }, frameDelay);
}

function textOverlay() {
  // this function is a canvas drawing function that draws nice floaty text that fades out

  // about a hundred lines of bog standard canvas api code here

  // the actual, asynch drawing code. we delay the text overlay by about 500ms to better synchronise with animation actions first
  setTimeout(function(){
    // then we draw something and slowly reduce the opacity every frameDelay (about 20ms) until the text fades out
    var interval = setInterval(function() {
      // when our alpha is below zero, we know the text isn't on the screen anymore
      if (alpha < 0) {
        clearInterval(interval);
        // the textOverlay function has now completed at this point
        gv.promiseA.then(
          function resolve(value) {
            console.log("this function has completed", Date.now() - value);
          }
        );
      }         
    }, frameDelay);
  }, animationDelay);
}

function sendAction(data) {
  // this function is called from performAction whenever an event needs to be sent to the server in a multiplayer game. bog standard stuff. nothing to see here, move along
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var data = JSON.parse(xhttp.responseText);

      completeAction(data);
    }

  xhttp.open("GET", serverURL + "?data=" + data);
  xhttp.send();
}

但是，这不起作用，因为它只是告诉我每个“then”何时完成，而不一定告诉我所有“then”何时完成，因为我认为这不是正确的链接。而且，我也不希望这些函数真正“链接”，因为它们需要全部异步启动和运行，因为没有一个函数依赖于其他函数的结果，无论如何让它们串联运行只会无缘无故地减慢事情的速度。

2. 当我知道异步函数将完成时，我还尝试在依赖代码中的每个点实例化 3 个不同的承诺（promiseA、promiseB、promiseC）。然后，我在函数completeAction() 的末尾使用“全部已解决”检查：

// set up three global variables so that they can be accessed within any function in my code
var promiseA, promiseB, promiseC;

function performAction() {
  // this is the function that is fired when the player presses a button to perform some action, for example "move 5 tiles"

  // a few hundred lines of code to do stuff client-side like move validation etc.

  drawPlayer(); // we now fire the client-side animation function so that players get instant feedback and don't need to wait for the server response in multi-player games

  // if this is a multi-player online game, we now call a function to fetch data from the server, for example to check if this player is blocked from taking that move
  if (gameType == "remoteHuman") {
    sendAction(data);
    }

  // otherwise, we don't need to contact the server if the player is playing a local AI game and can continue with the remaining actions
  else {
    completeAction(data);
  }
}

function completeAction(data) {
  // this function carries out the remaining tasks required on the client based on either the server response, or being called directly from performAction in local, single-player games

  updateStats(); // update all the player's stats
  textOverlay(); // draw a nice, floaty text overlay that shows some numbers and fades out

  // check if all three promises have been resolved before running a function to hand over play to the next player
  Promise.allSettled([promiseA, promiseB, promiseC]).then(([result]) => {
    var value = Date.now();
    console.log("all functions completed", value);
    console.log(result);
    console.log("play can now be handed over to the other play");
    nextPlayerTurn();
  });
}

function updateStats() {
  // this function is maybe a hundred lines of standard, synchronous code that updates player statistics like health etc.

  // we are at the bottom of the code, so the updateStats function has now completed at this point since it's synchronous
  promiseA = new Promise(function(resolve) {
    var value = Date.now();
    resolve(value);
    console.log("this function has completed", value);
  });
}

function drawPlayer() {
  // this function is the main animation function and is called towards the end of function performAction so that the player gets nice, instant response to actions without waiting for server responses etc.

  function animate() {
    // this is the core animation function that performs the canvas API drawing for each frame of an animation

    // if we have finished drawing all the animation frames, then we are OK to clear the timer
    if (currentFrame == frames.length) {
      clearInterval(timer);
      // the drawPlayer function has now completed at this point
      promiseB = new Promise(function(resolve) {
        var value = Date.now();
        resolve(value);
        console.log("this function has completed", value);
      });
    }
  }

  // set up the locally scoped timer to run the animation function every frameDelay (about 20ms) for smooth animations
  var timer = setInterval(function() {
    animate();
  }, frameDelay);
}

function textOverlay() {
  // this function is a canvas drawing function that draws nice floaty text that fades out

  // about a hundred lines of bog standard canvas api code here

  // the actual, asynch drawing code. we delay the text overlay by about 500ms to better synchronise with animation actions first
  setTimeout(function(){
    // then we draw something and slowly reduce the opacity every frameDelay (about 20ms) until the text fades out
    var interval = setInterval(function() {
      // when our alpha is below zero, we know the text isn't on the screen anymore
      if (alpha < 0) {
        clearInterval(interval);
        // the textOverlay function has now completed at this point
        promiseC = new Promise(function(resolve) {
          var value = Date.now();
          resolve(value);
          console.log("this function has completed", value);
        });
      }         
    }, frameDelay);
  }, animationDelay);
}

function sendAction(data) {
  // this function is called from performAction whenever an event needs to be sent to the server in a multiplayer game. bog standard stuff. nothing to see here, move along
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var data = JSON.parse(xhttp.responseText);

      completeAction(data);
    }

  xhttp.open("GET", serverURL + "?data=" + data);
  xhttp.send();
}

但这也不起作用，并产生与上面#1 类似的结果。

我知道我在第一次使用 Promise 时遗漏了一些基本的东西，但根据阅读所有 MDN 文档（但可能没有完全理解或误解它），我也确信 Promise 应该能够适用于这个用例。

我做错了什么？

Answer 1

您没有正确使用承诺。 （这是可以理解的，他们很混乱）。具体来说，您正在：

1. 创建空的 Promise
2. 滥用 then()

。创建空的 Promise

目前，您的 Promise 正在被创建并立即解决。

创建 Promise 时，您向其传递一个带有名为 resolve 的参数（本身就是一个函数）的函数。当您调用该解析参数时，承诺就会完成。。您的异步代码需要进入此函数内部，因为只有在您的异步代码完成后才需要调用resolve() - 或者您可以使用 hack 来获取此函数并在其他地方调用它。

then()

当您调用 .then 时，您只需添加另一个函数或 Promise，该函数或 Promise 在该 Promise 解析之后使用链中前一个 Promise 的返回值。由于您的 Promise 已经解决，因此 then() 会立即执行并返回，这对您没有任何好处。

那么如何解决呢？

您的代码有点难以填充到承诺中，因此您可以使用一些小技巧 从外部解析 Promise 并将其与 async/await 结合起来。

让我们看看 sendAction 的实现：

// Change function to async; This means it returns a promise, 
//  and you can use async...await
async function sendAction(data) {
    var resolver = {} // An object to smuggle resolve() out of scope
    var done = new Promise(function(resolve) {
        resolver.resolve = resolve // This is the function that resolves the promise
    })
    var xhttp = new XMLHttpRequest();

    // note that our callback function is "async" now
    xhttp.onreadystatechange = async function () { 
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var data = JSON.parse(xhttp.responseText);
            await completeAction(data); // this will be async too
            // Only now that all the asynchronous code is complete...
            resolver.resolve() // ...do we resolve the promise
        }
    }

    xhttp.open("GET", serverURL + "?data=" + data);
    xhttp.send();
    // The function will wait until the "done" promise is resolved
    await done;
}

async 和 await 有助于编写更具可读性和可理解性的代码，而不必过多地使用 Promise 、 and 和 async 函数返回 Promise 本身。

使用 async/await 为其余代码实现：

async function performAction() {
    // this is the function that is fired when the player presses a button to perform some action, for example "move 5 tiles"

    // a few hundred lines of code to do stuff client-side like move validation etc.

    var playerDrawn = drawPlayer(); // we now fire the client-side animation function so that players get instant feedback and don't need to wait for the server response in multi-player games

    // if this is a multi-player online game, we now call a function to fetch data from the server, for example to check if this player is blocked from taking that move
    if (gameType == "remoteHuman") {
        await sendAction(data);
    }

    // otherwise, we don't need to contact the server if the player is playing a local AI game and can continue with the remaining actions
    else {
        await completeAction(data);
    }

    await playerDrawn
}

async function completeAction(data) {
    // this function carries out the remaining tasks required on the client based on either the server response, or being called directly from performAction in local, single-player games

    updateStats(); // update all the player's stats
    await textOverlay(); // draw a nice, floaty text overlay that shows some numbers and fades out
}


function updateStats() {
    // this function is maybe a hundred lines of standard, synchronous code that updates player statistics like health etc.

    // we are at the bottom of the code, so the updateStats function has now completed at this point since it's synchronous
}

async function drawPlayer() {
    // this function is the main animation function and is called towards the end of function performAction so that the player gets nice, instant response to actions without waiting for server responses etc.

    var resolver = {}
    var done = new Promise(function(resolve) {
        resolver.resolve = resolve
    })
    function animate() {
        // this is the core animation function that performs the canvas API drawing for each frame of an animation

        // if we have finished drawing all the animation frames, then we are OK to clear the timer
        if (currentFrame == frames.length) {
            clearInterval(timer);
            // the drawPlayer function has now completed at this point
            resolver.resolve()
        }
    }

    // set up the locally scoped timer to run the animation function every frameDelay (about 20ms) for smooth animations
    var timer = setInterval(function () {
        animate();
    }, frameDelay);

    await done;
}

async function textOverlay() {
    // this function is a canvas drawing function that draws nice floaty text that fades out

    // about a hundred lines of bog standard canvas api code here

    var resolver = {}
    var done = new Promise(function(resolve) {
        resolver.resolve = resolve
    })
    // the actual, asynch drawing code. we delay the text overlay by about 500ms to better synchronise with animation actions first
    setTimeout(function () {
        // then we draw something and slowly reduce the opacity every frameDelay (about 20ms) until the text fades out
        var interval = setInterval(function () {
            // when our alpha is below zero, we know the text isn't on the screen anymore
            if (alpha < 0) {
                clearInterval(interval);
                // the textOverlay function has now completed at this point
                resolver.resolve()
            }
        }, frameDelay);
    }, animationDelay);

    await done;
}

async function sendAction(data) {
    // this function is called from performAction whenever an event needs to be sent to the server in a multiplayer game. bog standard stuff. nothing to see here, move along
    var resolver = {}
    var done = new Promise(function(resolve) {
        resolver.resolve = resolve
    })
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = async function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var data = JSON.parse(xhttp.responseText);

            await completeAction(data);
            resolver.resolve()
        }
    }

    xhttp.open("GET", serverURL + "?data=" + data);
    xhttp.send();
    await done;
}

现在您已将所有逻辑放入 performAction() 中，您可以使用它返回的 Promise，如下所示：

performAction().then(() => {
    var value = Date.now();
    console.log("all functions completed", value);
    console.log("play can now be handed over to the other play");
    nextPlayerTurn();
});

您可以进行很多优化make 在那里帮助使代码更加优雅，但我尝试尽可能少地更改它并使用您所拥有的内容。

我提出的最大建议是将 sendAction() 中的所有 XMLHttpRequest 内容替换为 Fetch API，它本身使用承诺，并且更加现代且易于使用。

编辑：其他建议阅读：

• 如何转换现有的承诺的回调 API？