更新异步等待中的值

Question

我开发了这一小段代码,它获取当前的lat和lon,并将它们传递给Google Map URL以获取地图数据.

lat和lon变量最初设置为undefined,然后在调用navigator.geolocation.getCurrentPosition时更新它们的值.此函数确实通过位置对象正确返回数据.然而,不知何故,变量的值不会更新,并且在传递给URL时它们仍未定义.

问题出在哪儿？

const getLocationDetails = async () => {

    let lat = undefined;
    let lon = undefined;

    await navigator.geolocation.getCurrentPosition( position => {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
    });
    const res = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lon}`,
        { method: 'GET' });
    const response = await res.json();

};

Answer 1

getCurrentPosition不返回一个promise,因此await是一个no-op,并且该函数不会暂停等待操作getCurrentPosition开始完成.当你await不是承诺的事情时,执行就会马上继续.

相反,给自己一个启用承诺的版本:

const asyncGetCurrentPosition = options => new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
});

然后使用它:

const getLocationDetails = async () => {
    let {coords: {latitude, longitude}} = await asyncGetCurrentPosition();
    const res = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}`,
        { method: 'GET' });
    // Note: Missing a `res.ok` check here
    const response = await res.json();
};

(在let {coords: {latitude, longitude}} = ..这部分被解构赋值回吐coords.latitude和coords.longitude并将其放置于latitude和longitude变量,分别.然后,我已经更新了fetch使用latitude和longitude[替代lat和lon.也可以用const在这里,因为你不改变latitude和longitude.的风格问题.)