async/await未按预期工作：为何console.log输出赋值前的state对象

嘿，我一眼就看出问题出在哪了——你用await去等navigator.geolocation.getCurrentPosition根本没用，因为这个API不是返回Promise的异步函数，它是传统的回调式异步设计。

为什么你的代码达不到预期？ #

await只能等待Promise对象完成，但getCurrentPosition调用后会立即返回undefined，await undefined会直接跳过等待，所以后面的console.log(state)会在回调函数执行前就跑起来了。而获取地理位置是异步操作，回调里给state赋值的逻辑还没触发，自然输出的就是初始空值的state。

怎么修复？ #

把这个回调式的API包装成Promise，这样就能用async/await来正确等待它完成了。改造后的代码如下：

export const state = { lat: "", lng: "", }; 

// 将getCurrentPosition包装为Promise
function getCurrentPositionPromise() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

export const addHandlerSetPosition = async function (handler) {
  try {
    // 等待获取位置完成
    const pos = await getCurrentPositionPromise();
    state.lng = pos.coords.longitude;
    state.lat = pos.coords.latitude;
    handler(state.lng, state.lat);
    // 现在这里的state已经是更新后的值了
    console.log(state);
  } catch (err) {
    // 处理获取位置失败的情况（比如用户拒绝授权）
    console.error("获取地理位置失败:", err);
  }
};

这样改造后，await会等到Promise成功resolve（也就是拿到位置信息）之后，才会执行后续的赋值和打印逻辑，console.log自然就能输出更新后的state了。另外加上try/catch还能处理获取位置失败的异常情况，让代码更健壮。

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