javascript - 在异步等待中更新值

Question

我开发了这段获取当前纬度和经度的代码，并将它们传递给 Google map URL 以获取 map 数据。

lat 和 lon 变量最初设置为未定义，然后在调用 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 是一个空操作，函数不会暂停等待操作 getCurrentPosition 开始完成。当您 await 不是 promise 的事情时，执行会立即继续¹。

相反，给自己一个支持 promise 的版本:

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。样式问题。)

---

¹ 当我在上面说“立即继续” 时，这有点言过其实了。 await 之后的代码被安排在当前任务(或微任务)完成时在微任务队列中运行。所以有一个短暂的延迟，但它不会等待getCurrentPosition 完成它的工作。这是重点。