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))
}

当我在我的组件DidMount中调用函数时，它总是返回一个undefined。 当我记录此内容时，它会在本地范围内打印出位置(即我使用 console.log(position( 的第一个代码块(。 从成功的回调中实际检索位置对象并在调用时将其返回到我的组件 DidMount 的最佳方法是什么？

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

Answer 1

在新的 Promise((解析，拒绝(后添加了箭头

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

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))

另请参阅如何从异步调用返回响应