如何在JavaScript中正确获取Promise的实际返回值？

问题原因 #

你当前同步打印拿到的是Promise实例本身，不是异步执行完成后的结果。Promise.prototype.then()的返回值依然是Promise对象，JS不会等待异步逻辑执行完成再执行后续的同步代码，所以打印时Promise还处于pending状态。

注意：所有需要使用异步返回结果的逻辑，都必须在异步执行的上下文中处理，无法同步获取到异步操作的返回值

正确获取方式 #

方案1：在async函数中使用await获取值 #

这是最简洁的写法，注意await只能在async标记的函数内部使用：

// 可以封装在自执行异步函数中，或者其他业务async函数内
const getNumberOfCards = async () => {
  const numberOfCards = await returnNumberOfFoods();
  console.log(numberOfCards); // 这里就能直接拿到你需要的4
  // 后续处理numberOfCards的所有逻辑都要写在这个函数内部
}
getNumberOfCards();

方案2：在then的回调函数内部处理结果 #

所有需要用到异步结果的逻辑都要放到then的回调里执行，不能拿到外部同步使用：

returnNumberOfFoods().then(numberOfCards => {
  console.log(numberOfCards); // 这里可以拿到正确结果
  // 所有用到numberOfCards的逻辑都写在这个回调内
})

原有异步函数优化建议 #

你写的returnNumberOfFoods函数里，web3的call方法如果不传回调的话本身就会返回Promise，不需要额外定义变量接收结果，可以简化为：

const returnNumberOfFoods = async() => {
  const web3 = new Web3(url);
  const myContract = new web3.eth.Contract(
    Contract.abi,
    Contract.address
  );
  // 直接return await call的结果即可，不需要额外写回调赋值
  return await myContract.methods.numberOfFoods().call();
}

内容的提问来源于stack exchange，提问作者Shourya Shikhar