如何检查多个同步和异步 javascript 承诺是否已完成
How to check if a number of both synchronous and asynchronous javascript promises have completed
我是 javascript 中使用 promises 的新手，我似乎无法得到（我认为）应该是相当基本的工作的东西。
我正在为一个回合制游戏编写代码，在玩家的回合中，会发生许多事情，其中一些是异步的（例如使用 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 何时全部完成，而不用 promises 链接它们，因为我希望它们全部 运行 异步。我只对所有功能何时完成感兴趣。这些功能永远不会失败，因此不需要错误捕获或失败响应检查。关于功能的一些统计数据：
- drawPlayer: 有一个异步组件，主要基于setInterval。在典型的客户端上需要 200-1000 毫秒才能完成，具体取决于玩家采取的行动
- textOverlay: 有一个异步组件，主要基于setInterval。在典型客户端上需要 100-500 毫秒才能完成
- updateStats：纯同步代码。在典型的客户端上可能需要 2-5 毫秒才能完成。然而，这个函数必须在轮到另一个玩家之前完成，所以我需要它包含在承诺“链”中，即使它是同步的，与 drawing/animation 函数相比执行时间短
这是我目前尝试过的方法：
- 在调用 drawPlayer() 之前在 performAction 中实例化一个承诺。然后在 3 个依赖函数的每个点上，当我确定函数已经完成时，我添加一个“然后”。代码如下：
// 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”何时完成，因为我认为这不是正确的链接。而且，我不希望函数真正“链接”起来，因为它们需要全部启动并且 运行 异步，因为函数的 none 取决于其他函数的结果，并且无论如何让它们 运行 串联起来只会无缘无故地减慢速度。
- 当我知道异步函数将完成时，我还尝试在依赖代码中的每个点实例化 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 相似的结果。
我知道我在第一次使用 promises 时遗漏了一些基本的东西，但我也确信基于阅读所有 MDN 文档（但可能没有完全理解或误解它）promises 应该能够工作对于这个用例。
我做错了什么？
你没有正确使用承诺。 （这是可以理解的，他们很困惑）。具体来说，您是：
- 创建空 Promise
- 误用
then().
创建空 Promise
当前，正在创建并立即解决您的承诺。
当你创建一个承诺时，你会向它传递一个带有名为 resolve 的参数（它本身就是一个函数）的函数。当您调用该解析参数 时，承诺会完成。您的异步代码需要进入 inside 这个函数，因为您只需要调用 resolve() 它 在 您的异步代码完成后 -或者你可以使用 hack 来获得这个函数并在别处调用它。
然后()
当您调用 .then 时，您只是添加另一个函数或承诺，在该承诺解析后使用链中前一个承诺的 return 值。由于您的承诺已经解决，then() 立即执行并 returns，对您没有任何好处。
那么如何解决呢？
你的代码有点难以塞入承诺中，所以你可以使用一些小技巧 resolve promises externally 并将其与 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 和异步函数 return 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 it return：
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();
});
您可以进行很多优化以帮助使代码更优雅，但我尝试尽可能少地更改它并使用您已有的东西。
我提出的最大建议是将 sendAction() 中的所有 XMLHttpRequest 内容替换为 Fetch API，后者本身使用 promises，并且更加现代且易于使用与.
编辑：其他建议阅读：
- How do I convert an existing callback API to promises?
我是 javascript 中使用 promises 的新手，我似乎无法得到（我认为）应该是相当基本的工作的东西。
我正在为一个回合制游戏编写代码，在玩家的回合中，会发生许多事情，其中一些是异步的（例如使用 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 何时全部完成，而不用 promises 链接它们，因为我希望它们全部 运行 异步。我只对所有功能何时完成感兴趣。这些功能永远不会失败，因此不需要错误捕获或失败响应检查。关于功能的一些统计数据：
- drawPlayer: 有一个异步组件，主要基于setInterval。在典型的客户端上需要 200-1000 毫秒才能完成，具体取决于玩家采取的行动
- textOverlay: 有一个异步组件，主要基于setInterval。在典型客户端上需要 100-500 毫秒才能完成
- updateStats：纯同步代码。在典型的客户端上可能需要 2-5 毫秒才能完成。然而，这个函数必须在轮到另一个玩家之前完成，所以我需要它包含在承诺“链”中，即使它是同步的，与 drawing/animation 函数相比执行时间短
这是我目前尝试过的方法：
- 在调用 drawPlayer() 之前在 performAction 中实例化一个承诺。然后在 3 个依赖函数的每个点上，当我确定函数已经完成时，我添加一个“然后”。代码如下：
// 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”何时完成，因为我认为这不是正确的链接。而且，我不希望函数真正“链接”起来，因为它们需要全部启动并且 运行 异步，因为函数的 none 取决于其他函数的结果，并且无论如何让它们 运行 串联起来只会无缘无故地减慢速度。
- 当我知道异步函数将完成时，我还尝试在依赖代码中的每个点实例化 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 相似的结果。
我知道我在第一次使用 promises 时遗漏了一些基本的东西，但我也确信基于阅读所有 MDN 文档（但可能没有完全理解或误解它）promises 应该能够工作对于这个用例。
我做错了什么？
你没有正确使用承诺。 （这是可以理解的，他们很困惑）。具体来说，您是：
- 创建空 Promise
- 误用
then().
创建空 Promise
当前，正在创建并立即解决您的承诺。
当你创建一个承诺时，你会向它传递一个带有名为 resolve 的参数（它本身就是一个函数）的函数。当您调用该解析参数 时，承诺会完成。您的异步代码需要进入 inside 这个函数，因为您只需要调用 resolve() 它 在 您的异步代码完成后 -或者你可以使用 hack 来获得这个函数并在别处调用它。
然后()
当您调用 .then 时，您只是添加另一个函数或承诺，在该承诺解析后使用链中前一个承诺的 return 值。由于您的承诺已经解决，then() 立即执行并 returns，对您没有任何好处。
那么如何解决呢？
你的代码有点难以塞入承诺中，所以你可以使用一些小技巧 resolve promises externally 并将其与 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 和异步函数 return 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 it return：
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();
});
您可以进行很多优化以帮助使代码更优雅，但我尝试尽可能少地更改它并使用您已有的东西。
我提出的最大建议是将 sendAction() 中的所有 XMLHttpRequest 内容替换为 Fetch API，后者本身使用 promises，并且更加现代且易于使用与.
编辑：其他建议阅读：
- How do I convert an existing callback API to promises?