求助：JavaScript异步函数中变量无法外部获取（地理定位场景）

嘿，你完全找对方向了——这就是异步JavaScript的经典陷阱！你猜的没错，第二个console.log(pos)确实先于第一个执行，这就是问题的核心。

问题根源 #

navigator.geolocation.getCurrentPosition是一个异步API：当你调用它时，浏览器会把“获取地理位置”这个任务放到后台去做，不会阻塞后续代码的执行。所以代码会先跑console.log(pos)（这时候pos还是初始的空字符串），等后台的位置获取成功后，才会执行回调函数里的代码，给pos赋值并打印正确的坐标。

简单说：同步代码按顺序跑，异步任务要等它自己完成才会触发回调，所以顺序就反过来了。

解决方案 #

要拿到异步操作的结果，必须在它完成后再处理，这里有几种常用的写法：

1. 把逻辑放到回调函数里（最基础的方式）

直接把所有需要使用坐标的代码放在回调内部，或者封装成函数在回调里调用：

'use strict';

// 封装处理坐标的逻辑
function useGeolocation(pos) {
  console.log(pos);
  // 这里写所有需要用到坐标的业务代码，比如渲染地图、发送请求等
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const geopos = {
      lng: position.coords.longitude,
      lat: position.coords.latitude
    };
    useGeolocation(geopos); // 拿到位置后再执行逻辑
  });
}

2. 用Promise封装（更现代的写法，支持链式调用）

把异步的地理位置API包装成Promise，这样可以用更优雅的.then()或者async/await来处理异步流程：

'use strict';

// 封装成Promise
function getGeolocation() {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error("你的浏览器不支持地理位置功能"));
      return;
    }
    // 成功时resolve位置信息，失败时reject错误
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

// 方式一：用.then()链式调用
getGeolocation()
  .then(position => {
    const geopos = {
      lng: position.coords.longitude,
      lat: position.coords.latitude
    };
    console.log(geopos);
    // 在这里处理坐标逻辑
  })
  .catch(error => {
    console.error("获取位置失败：", error);
  });

// 方式二：用async/await（需要在async函数中使用）
async function handlePosition() {
  try {
    const position = await getGeolocation();
    const geopos = {
      lng: position.coords.longitude,
      lat: position.coords.latitude
    };
    console.log(geopos);
    // 在这里处理坐标逻辑
  } catch (error) {
    console.error("获取位置失败：", error);
  }
}

handlePosition();

核心总结 #

异步操作的结果不能在同步代码中直接获取，必须通过回调、Promise或async/await来等待异步任务完成后再处理。你之前的代码就是在同步代码里直接访问了还没被赋值的pos，所以才会得到空字符串。

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