Promise的then方法返回数组变量问题及地理定位Promise封装咨询

嘿，我来帮你搞定这个问题！首先得明确一点：因为地理定位是异步操作，所以你没法直接同步拿到结果，得顺着Promise的异步逻辑来处理。

先看你已经写好的getUsrLoc函数，它会在获取到位置信息后resolve一个Position对象，我们要做的就是在then里提取坐标，塞进数组，再把这个数组传递下去。

方法一：链式调用Promise #

直接创建一个返回Promise的函数，在then里处理数组并返回它：

// 你已有的获取位置的Promise函数
function getUsrLoc() { 
  return new Promise(function(resolve, reject) { 
    if(navigator.geolocation){ 
      navigator.geolocation.getCurrentPosition(resolve) 
    } else { 
      reject('Geolocation is not supported by this browser or OS'); 
    } 
  }); 
}

// 新函数：获取坐标并返回数组
function getCoordsArray() {
  return getUsrLoc()
    .then(position => {
      // 从Position对象里提取经纬度，塞进新数组
      const coordsArray = [
        position.coords.latitude,
        position.coords.longitude
      ];
      // 返回数组，这样后续的then就能拿到它
      return coordsArray;
    })
    .catch(error => {
      // 处理不支持地理定位或获取失败的情况
      console.error('获取位置失败：', error);
      // 可以返回空数组或者抛出错误，根据你的需求调整
      return [];
    });
}

// 调用方式：用then接收返回的数组
getCoordsArray().then(coords => {
  console.log('拿到的坐标数组：', coords);
  // 在这里就可以使用coords这个数组变量做后续操作了
});

方法二：用async/await简化代码 #

如果你觉得链式调用有点繁琐，ES6的async/await能让异步代码看起来像同步代码，更易读：

// 同样使用你已有的getUsrLoc函数
async function getCoordsArray() {
  try {
    const position = await getUsrLoc();
    // 生成坐标数组并返回
    return [position.coords.latitude, position.coords.longitude];
  } catch (error) {
    console.error('获取位置失败：', error);
    return [];
  }
}

// 调用方式
async function useCoords() {
  const coords = await getCoordsArray();
  console.log('拿到的坐标数组：', coords);
  // 在这里使用坐标数组
}

useCoords();

关键注意点 #

• 别想着同步返回数组！因为地理定位需要时间，当你同步写const arr = getCoordsArray()时，arr只会是一个未完成的Promise，而不是你要的数组。必须通过then或者await来等待异步操作完成，才能拿到真正的数组数据。
• 一定要加catch处理错误，避免获取位置失败时Promise被拒绝却没人处理，导致控制台报错。

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