How to use Async Wait with HTML5 GeoLocation API?

Question

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.

`getAddress` has no `return` statement, so of course it returns a Promise that resolves as `undefined` — Quentin, Aug 14 '18 at 14:00
Your reverseGeoCode isn't returning anything, the return call is in the then() callback which isnt a return for the outer function — Patrick Evans, Aug 14 '18 at 14:00
@Quentin `return this.reverseGeoCode(url);` this should be outside the `await`? — Maihan Nijat, Aug 14 '18 at 14:03
@PatrickEvans I cannot return value from inside the `then` to outside? — Maihan Nijat, Aug 14 '18 at 14:04

score 11 · Answer 1 · answered Aug 05 '20 at 15:20

The code below show similar issue. Try to refactor it. Remember to use it with await in async function. Something like:

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

Lyubomir · Accepted Answer · 2018-08-14T14:12:50.127

10

There are several problems with the shown snippets

getAddress() doesn't actually return anything.
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();
}

edited Aug 14 '18 at 14:12

answered Aug 14 '18 at 14:04

Lyubomir

19,615
6
55
69

Thanks for the answer. I still get `undefined` – Maihan Nijat Aug 14 '18 at 14:08
Which is probably caused by ` return this.reverseGeoCode(url); ` – Maihan Nijat Aug 14 '18 at 14:11
Thank you for this answer, I'm more of a server side dev and my JS is still basic but I wanted to wait for the results of this before having the app proceed to try to map it onto a Google map. Thanks to your answer I was able to figure out how to make the app "Wait" first for the location before proceeding – Uriahs Victor May 19 '21 at 23:39

score 0 · Answer 3 · answered Jan 05 '22 at 21:44

Here is a clean, simple version that encapsulates the API into a single function:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Geolocation API</title>
  <meta name="description" content="demo of the geolocation api">
  <meta name="author" content="Mark Tyers">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="module" src="location.js" defer></script>
</head>

<body>
  <h1>GeoLocation</h1>
    <p></p>
    <p></p>
</body>
</html>


/* location.js */

try {
    const position = await getCurrentPosition()
    console.log(position)
    const lat = position.coords.latitude
    const lon = position.coords.longitude
    document.querySelector('p:nth-of-type(2)').innerText = `latitude: ${lat}`
    document.querySelector('p:nth-of-type(1)').innerText = `longitude: ${lon}`
} catch(err) {
    console.log(err)
    document.querySelector('p:nth-of-type(1)').innerText = err.message
}

function getCurrentPosition() {
    return new Promise( (resolve, reject) => {
        navigator.geolocation.getCurrentPosition(
            position => resolve(position),
            error => reject(error)
        )
    })
}

How to use Async Wait with HTML5 GeoLocation API?

3 Answers3

Linked