地理位置.getCurrentPosition没有通过await将返回值赋给变量

Question

上下文:构建一个基本的天气应用程序，作为Odin项目的全栈web开发课程的一部分。

我想做什么:从浏览器内置的地理定位功能中获取用户位置，以默认情况下使用当地天气填充应用程序。我想将经纬度数据发送给loadApp()，然后loadApp()将使用这些数据自动填充网页与当地的天气

结果是:该函数运行if语句，并在分配defaultLocation变量之前告知用户拒绝访问。

What I tried:我尝试了两个async函数，因为我认为async从字面上阻止代码运行，直到它的承诺被解决，所以我不知道警报(用户拒绝访问)行是如何运行的。

(我还没有构建html/css，只是现在从控制台工作)

async function getLocationFromUser (){
if ('geolocation' in navigator) {
/* geolocation is available */
console.log('geolocation IS available');
navigator.geolocation.getCurrentPosition((position) => {
console.log(position.coords.latitude, position.coords.longitude);
let defaultCoords = [];
defaultCoords.push(position.coords.latitude);
defaultCoords.push(position.coords.longitude);
defaultLocation =  defaultCoords;
});
} else {
console.log('geolocation is NOT available');
return false;
/* geolocation IS NOT available */
}
}

async function loadApp(){
let defaultLocation = await getLocationFromUser();
if(!defaultLocation){
alert('user denied us');
//code if user denies location service;
} else {
console.log(defaultLocation);
}
}
loadApp().then(data => console.log(data)).catch(err => console.log(err));

Answer 1

您的getLocationFromUser在支持地理位置时不返回任何内容。由于getCurrentPosition使用回调模式，您可以"承诺";通过将其包装在Promise中来调用回调。立即返回承诺。

不需要在这里使用async，因为你没有等待函数中的任何内容。

function getLocationFromUser (){
return new Promise((resolve, reject) => {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
resolve(position.coords);
}, reject);
} else {
reject('Geolocation not supported');
}
});
}

async function loadApp(){
try {
const defaultLocation = await getLocationFromUser();
console.log(defaultLocation);
} catch (error) {
alert('user denied us');
//code if user denies location service;
}
}