navigator.geolocation.getCurrentPosition 函数在本地范围外调用时导致未定义

Question

navigator.geolocation.getCurrentPosition成功回调的对象在调用时如何在函数外访问？

假设我在导出的文件（称为 UserLoc）中有一个函数。

export const locateCurrentPosition = () => {
  const currentPosition = navigator.geolocation.getCurrentPosition(
    position => {
      console.log(position);
      return position;
    },
    error => {
      console.log(error.message);
      return error;
    },
    {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 1000
    }
  );

  return currentPosition;
};

现在在我的一个组件 js 文件中，我想在 componentDidMount() 中调用这个函数

const {
  locateCurrentPosition
} = require("../Views/components/User/UserMap/UserLoc");

async componentDidMount(){

console.log(locateCurrentPosition())
locateCurrentPosition().then(data=>console.log(data))
}

当我在 componentDidMount 中调用函数时，它总是返回一个未定义的。当我记录这个时，它会打印出在本地范围内的位置（即上面我使用console.log（位置）的第一个代码块。从成功的回调中实际检索位置对象并将其返回的最佳方法是什么？我的 componentDidMount 什么时候被调用？

我尝试过承诺，然后用我的控制台日志声明以及不同类型的返回，但我似乎总是不确定。 locateCurrentPosition 函数中的返回语句似乎不起作用。有什么建议吗？

Answer 1

在 new Promise((resolve,reject) 后添加箭头

navigator.geolocation.getCurrentPosition返回undefined，调用locateCurrentPosition返回的值。位置只传递给调用中提供的回调，可以根据需要转为promise：

export const locateCurrentPosition = () => new Promise((resolve,reject)=> {
  navigator.geolocation.getCurrentPosition(
    position => {
      console.log(position);
      resolve(position);
    },
    error => {
      console.log(error.message);
      reject(error);
    },
    {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 1000
    }
  );
});

并使用

调用

locateCurrentPosition().then(position=>console.log(position))

另见How do I return the response from an asynchronous call