如何使用异步等待与 HTML5 GeoLocation API？

Question

第一个方法返回承诺。

 getCoordinates() {
  return new Promise(function(resolve, reject) {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

返回 reverseGeoCode 方法的结果。

 async getAddress() {
  await this.getCoordinates().then(position => {
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    let url = Constants.OSMAP_URL + latitude + "&lon=" + longitude;
    // Reverse geocoding using OpenStreetMap
    return this.reverseGeoCode(url);
  });
}

使用自定义类进行 API 调用并返回结果。

 reverseGeoCode(url) {
  let requestService = new RequestService("json", url);
  requestService.call().then(result => {
    return result;
  });
}

这就是我所说的：

 let geoLocation = new GeoLocation();
geoLocation.getAddress().then(r => {
  console.log(r);
});

控制台记录未定义。

原文由 Maihan Nijat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

显示的片段有几个问题

1. getAddress() 实际上没有 return 任何东西。

2. 如果使用 await then() ，则不需要 —，反之亦然（阻塞或非阻塞，不是两者）。

这是一个正确的版本

async getAddress() {
  // notice, no then(), cause await would block and
  // wait for the resolved result
  const position = await this.getCoordinates();
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;
  let url = Constants.OSMAP_URL + latitude + "&lon=" + longitude;

  // Actually return a value
  return this.reverseGeoCode(url);
}

您还必须以类似的方式重写 reverseGeoCode ，例如

async reverseGeoCode(url) {
  let requestService = new RequestService("json", url);
  return await requestService.call();
}

原文由 Lyubomir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

下面的代码显示了类似的问题。尝试重构它。请记住将它与 await 在 async 函数中一起使用。就像是：

 window.onload = async () => {

const getCoords = async () => {
        const pos = await new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject);
        });

        return {
          long: pos.coords.longitude,
          lat: pos.coords.latitude,
        };
    };

const coords = await getCoords();
}

原文由 woodrejs 发布，翻译遵循 CC BY-SA 4.0 许可协议