如何在JavaScript的嵌套map中等待Promise函数执行完成？

你可以通过分层调用Promise.all的方式处理嵌套的异步map结果，不需要递归工具，手动处理两层结构即可。

修正后可运行的完整代码 #

async function getReactionScores(userReactions) {
  // 外层map返回的是Promise数组，每个元素对应单个reaction的处理结果
  const reactionsWithSharesPromises = userReactions.map(async (reactions) => {
    // 内层先等待所有用户的异步操作完成
    const shares = await Promise.all(reactions.users.map(async (user) => {
      return {
        username: user.username,
        shares: await sleep(1, user.id),
      };
    }));
    // 内层所有Promise resolve后再返回完整的reaction对象
    return {
      emoji: reactions.emoji,
      shares
    };
  });
  // 最后等待所有reaction的处理完成，拿到最终结果
  return await Promise.all(reactionsWithSharesPromises);
}

// 注意原sleep写法存在问题：setTimeout的回调需要包裹函数，否则resolve会立即执行
function sleep(time, userID) {
  return new Promise((resolve) => setTimeout(() => resolve(userID), time));
}

核心逻辑说明 #

• 内层reactions.users.map生成的是用户异步操作的Promise数组，用Promise.all包裹后等待所有用户操作完成，就能拿到解析后的shares数组。
• 第一层map的回调设置为async函数，因此每个返回值都是Promise，最终得到的reactionsWithSharesPromises是Promise数组，外层再用Promise.all等待所有反应的处理完成即可。
• 这种分层处理的方式适配固定层级的嵌套结构，比通用递归处理性能更好，逻辑也更清晰。

内容的提问来源于stack exchange，提问作者Filipe Aleixo