JavaScript中Async函数未等待执行结果就运行后续代码如何解决

云原生阿岚

2026-9-24

核心问题

你当前的waitForLoc函数虽然标记了async，但没有把回调风格的navigator.geolocation.getCurrentPosition包装为Promise，导致函数不等定位回调执行就直接返回，后续路径规划函数触发时还没有拿到正确的用户坐标，自然达不到想要的执行顺序。

改造代码

1. 重写定位函数，适配async/await逻辑

async function waitForLoc(){
  return new Promise((resolve, reject) => {
    if(!navigator.geolocation){
      reject(new Error("当前环境不支持地理定位"));
      return;
    }
    // 定位成功触发resolve，失败触发reject
    navigator.geolocation.getCurrentPosition(
      position => {
        const latUser = position.coords.latitude;
        const lngUser = position.coords.longitude;
        L.marker([latUser, lngUser]).addTo(mymap);
        // 返回用户坐标，避免依赖全局变量
        resolve({latUser, lngUser});
      },
      err => reject(err)
    )
  })
}

2. 调整执行顺序，保证定位完成后再做路径规划

const lat = coordinates[1];
const lng = coordinates[0];
let Route = null;

async function planRoute(userLat, userLng) {
  // 原有1秒延时如果是为了等定位，现在可以直接删除
  // await new Promise(resolve => setTimeout(resolve, 1000));

  if(Route) mymap.removeControl(Route);

  Route = L.Routing.control({
    waypoints: [
      L.latLng(userLat, userLng),
      L.latLng(lat, lng)
    ],
    routeWhileDragging: false
  }).addTo(mymap);

  mymap.closePopup();
}

// 按顺序执行
waitForLoc()
.then(userCoord => planRoute(userCoord.latUser, userCoord.lngUser))
.catch(err => console.error("执行出错：", err));