Promise异步执行导致数组console显示有值实际为空问题求助

问题根源 #

Promise的then回调是异步执行的。当你在then外部直接调用console.log(productBuyDataArray)或使用这个数组时，then里的填充逻辑还没运行，数组自然是空的。

至于控制台显示有数据，是因为浏览器控制台会保留对数组的引用——你执行console.log时数组是空的，但后续then回调填充数组后，控制台会更新显示这个引用的最新状态。而JSON.stringify会直接输出调用时的数组内容，所以能反映真实的同步状态。

解决方案 #

方案1：在then回调内使用数组 #

所有依赖这个数组的操作都放在then内部，确保数组已经被填充：

let productBuyDataArray = [];
productBuyData.then(function(result) {
  for (let key in result) {
    productBuyDataArray.push({
      time: key,
      value: result[key],
    });
  }
  // 在这里执行所有需要用到数组的逻辑
  console.log(JSON.stringify(productBuyDataArray));
  // 比如渲染数据、计算统计值等
});

方案2：使用async/await简化异步逻辑 #

用async/await让代码看起来像同步执行，可读性更强：

async function handleProductData() {
  const result = await productBuyData;
  const productBuyDataArray = [];
  for (let key in result) {
    productBuyDataArray.push({
      time: key,
      value: result[key],
    });
  }
  // 在这里使用数组
  console.log(JSON.stringify(productBuyDataArray));
}

// 调用函数
handleProductData();

方案3：封装成返回Promise的函数 #

把数组的生成逻辑封装成函数，返回一个包含填充后数组的Promise，后续按需调用：

function getFormattedBuyData() {
  return productBuyData.then(result => {
    const formattedArray = [];
    for (let key in result) {
      formattedArray.push({
        time: key,
        value: result[key],
      });
    }
    return formattedArray;
  });
}

// 使用时
getFormattedBuyData().then(array => {
  console.log(JSON.stringify(array));
  // 其他业务逻辑
});

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