async/await中变量值未更新问题：地理定位数据无法传递

嘿，这个问题我之前也踩过坑！核心原因是**navigator.geolocation.getCurrentPosition并不是返回Promise的异步函数**，你用await根本等不到它的回调执行完成，代码就直接跳到后续的fetch步骤了，这时候lat和lon自然还是初始的undefined。

为什么会出现这个问题？ #

getCurrentPosition是传统的回调式API，它不会返回Promise对象，而await关键字只对返回Promise的函数生效。你的代码实际执行顺序是：

1. 初始化lat和lon为undefined
2. 调用getCurrentPosition（这是异步操作，会立刻返回，不会等待回调触发）
3. 直接执行fetch请求，此时回调还没运行，lat和lon还是undefined
4. 过一会儿回调才执行，给lat和lon赋值，但这时候请求已经发出去了

解决办法：把回调API包装成Promise #

我们可以手动把getCurrentPosition包装成一个返回Promise的函数，这样就能用await等待它完成了。修改后的代码如下：

const getLocationDetails = async () => {
  // 把getCurrentPosition包装为Promise
  const getPosition = () => {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(
        position => resolve(position),
        error => reject(error) // 别忘了处理获取位置失败的场景
      );
    });
  };

  try {
    // 等待位置获取完成
    const position = await getPosition();
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;

    // 现在lat和lon有值了，再发起请求
    const res = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lon}`, {
      method: 'GET'
    });
    const response = await res.json();
    console.log('地理编码数据:', response);
  } catch (error) {
    console.error('操作失败:', error);
    // 这里可以加用户友好的提示，比如"您拒绝了位置权限"或"获取位置超时"
  }
};

额外提示 #

我特意加上了try/catch块来处理可能的错误——比如用户拒绝位置权限、设备无法获取位置、请求地图数据失败等情况，这样代码会更健壮。现在代码会严格等待位置获取成功后，再发起fetch请求，就不会出现undefined的问题了。

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