javascriptasynchronouspromisew3c-geolocation

How to use Async Wait with HTML5 GeoLocation API?


The first method returns promise.

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

Returns the result of reverseGeoCode method.

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

Uses custom class to make an API call and return the result.

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

This is how I call:

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

The console logs undefined.


Solution

  • There are several problems with the shown snippets

    1. getAddress() doesn't actually return anything.

    2. If await is used, then() is not needed or vice-versa (blocking or non-blocking, not both).

    Here is a correct version

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

    You'll also have to rewrite reverseGeoCode in a similar fashion, something like

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