Why does this promise execute its then() callback before finishing?

Question

I have a function that fetches the user's geolocation. it works. Now, I want to send this data to my server. I have used a simple then/catch promise. But the then callback is executed before the geolocation function finishes. How to fix this?

Here is the code:

const fetchGeoLocation: SearchService["fetchGeoLocation"] = async () => {
  const geo = navigator.geolocation;
  if (!geo) throw new Error("error.geolocation-unavailable");
  const handleError = (err: any) => {
    if (err.code === 1) throw new Error("error.geolocation-permission_denied");
    if (err.code === 2) throw new Error("error.geolocation-unavailable");
    if (err.code === 3) throw new Error("error.geolocation-timeout");
  };
  const handleSuccess = (position) => {
    return { location: [position.coords.longitude, position.coords.latitude] };
  };
  geo.getCurrentPosition(handleSuccess, handleError, { maximumAge: 10000 });
};


  const onUpdateLocation = async () => {
    onLoad();
    fetchGeoLocation()
      .then((res) => onSave(res.data))
      .catch(({ message }) => onError(message));
  };

The error is:

can't read data of undefined

This error displays before fetchGeoLocation finishes. Also, fetchGeoLocation gives a correct result a shortly afterwards.

How to fix this?

I have tried a different strategy, without any promise, to simply catch an error:

// same as above but no "async" function
const fetchGeoLocation: SearchService["fetchGeoLocation"] = () => {
  const geo = navigator.geolocation;
  if (!geo) throw new Error("error.geolocation-unavailable");
  const handleError = (err: any) => {
    if (err.code === 1) throw new Error("error.geolocation-permission_denied");
    if (err.code === 2) throw new Error("error.geolocation-unavailable");
    if (err.code === 3) throw new Error("error.geolocation-timeout");
  };
  const handleSuccess = (position) => {
    return { location: [position.coords.longitude, position.coords.latitude] };
  };
  geo.getCurrentPosition(handleSuccess, handleError, { maximumAge: 10000 });
};

  const onUpdateLocation = async () => {
    try {
      onLoad();
      const newLocation = await fetchGeoLocation();
      onSave(newLocation);
    } catch (err) {
      onError(err.message);
    }
  };

To test it, I have disabled the geolocation feature on my browser. The error appears in my console, but never reaches the catch block.

How to fix this?