将Promise内容保存至外部数组时出现undefined值的技术问题咨询

这个问题的核心是JavaScript异步操作的执行时序问题，我来给你拆解清楚：

为什么会出现undefined/空数组？ #

你写的fetchCoordinates是异步函数，它返回的是一个Promise对象。当你调用fetchCoordinates(pluscode).then(...)时，JavaScript不会停下来等待异步请求完成，而是继续执行后面的代码。

如果在.then()回调函数外部（比如调用完fetchCoordinates后立刻）去访问places数组，这时候异步请求还没完成，.then里的push操作根本还没执行，所以places要么是空数组，要么你尝试读取它的元素时就会得到undefined。

而.then()内部的console.log能输出正确数据，是因为这个回调函数只会在fetchCoordinates的Promise成功resolved（也就是请求完成、拿到了geoinfo数据）之后才会被执行，这时候数据已经准备就绪了。

可行的解决方案 #

方案1：在.then()内部处理后续逻辑 #

所有依赖places数组的代码，都应该放在.then()回调里面，或者放在被.then()调用的函数中，确保只有当数据准备好之后才执行：

let places = [] 
fetchCoordinates(pluscode) 
  .then(geoinfo => { 
    places.push({
      position: new google.maps.LatLng(
        geoinfo.plus_code.geometry.location.lat,
        geoinfo.plus_code.geometry.location.lng
      )
    }) 
    // 在这里执行所有需要用到places的逻辑，比如渲染地图标记
    renderMapMarkers(places);
  })
  .catch(error => {
    // 别忘了处理请求失败的情况
    console.error('获取坐标失败:', error);
  })

function renderMapMarkers(places) {
  // 这里可以安全地使用places数组
  console.log(places); // 能看到正确的元素
  // 比如添加地图标记的代码
  places.forEach(place => {
    new google.maps.Marker({
      position: place.position,
      map: yourMapInstance
    });
  });
}

方案2：用async/await简化代码（更推荐） #

既然你已经用到了async函数，不如直接用await来等待Promise完成，让代码逻辑更像同步代码，时序更清晰：

async function loadPlaces() {
  let places = [];
  try {
    // 等待fetchCoordinates完成，拿到geoinfo数据
    const geoinfo = await fetchCoordinates(pluscode);
    // 填充places数组
    places.push({
      position: new google.maps.LatLng(
        geoinfo.plus_code.geometry.location.lat,
        geoinfo.plus_code.geometry.location.lng
      )
    });
    // 直接在这里使用places，逻辑更直观
    console.log(places); // 正确包含数据
    renderMapMarkers(places);
  } catch (error) {
    console.error('获取坐标失败:', error);
  }
}

// 调用这个异步函数
loadPlaces();

关键提醒 #

永远不要在异步操作完成前依赖它的结果！JavaScript的异步操作是非阻塞的，代码会按顺序执行，但异步回调会在后台任务完成后才触发，一定要确保你的后续逻辑是在数据准备好之后才执行的。

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