如何正确获取Promise的值？代码返回空数组问题排查与解决

嘿，这个问题我太熟悉了——本质就是异步操作的执行顺序在搞鬼！

为什么会返回空数组？ #

你的工具列表肯定是通过异步操作生成的（比如API请求、文件读取、定时器这类需要等待的任务）。当你在第二个})之后直接访问数组时，异步任务还没跑完，数组还没被填充数据，自然就返回空的[]。而把console.log()放在那两个})之间时，那个位置刚好是异步操作完成后的回调/resolve函数内部，这时候数据已经准备就绪，所以能打印出正确的工具列表。

怎么在})之后正确获取工具列表？ #

核心思路是：让生成工具列表的逻辑返回一个Promise对象，然后通过.then()或者async/await来等待异步任务完成，再获取结果。

方案1：使用Promise的.then()方法

先确保你的工具列表生成函数返回Promise，然后在外部通过.then()接收结果：

// 简化版的原代码示例（模拟异步生成工具列表）
function generateToolList() {
  return new Promise((resolve) => {
    // 这里是你的异步逻辑：比如调用接口、读取本地数据等
    setTimeout(() => {
      const toolList = ["代码格式化工具", "调试工具", "性能分析工具"];
      resolve(toolList); // 将结果传递出去
    }, 1000);
  });
}

// 在第二个})之后调用并获取结果
generateToolList().then((toolList) => {
  console.log(toolList); // 这里就能拿到正确的工具列表了
  // 所有需要使用toolList的逻辑都放在这个回调里
});

方案2：使用async/await语法（更简洁）

如果你的环境支持ES8+，用async/await可以让异步代码看起来像同步代码：

async function getTools() {
  const toolList = await generateToolList(); // 等待Promise完成，拿到结果
  console.log(toolList);
  // 这里可以直接使用toolList做后续处理
}

getTools();

关键注意点

• 一定要确保你的工具列表生成函数正确返回Promise，并且在异步操作完成时调用resolve()传递结果。
• 不要试图在异步任务外部直接同步获取结果——异步操作的结果只能在异步完成的回调里，或者通过await等待后获取。

内容的提问来源于stack exchange，提问作者we.are