0
378
Visualizaçõesthe code is executed before expected, async/await not working as expected
export const state = {
lat: "",
lng: "",
};
// Setting the map
//gets lat and lng and from the browser.
export const addHandlerSetPosition = async function (handler) {
await navigator.geolocation.getCurrentPosition(function (pos) {
state.lng = pos.coords.longitude;
state.lat = pos.coords.latitude;
handler(state.lng, state.lat);
});
console.log(state);
};
i want to know why the output of the console.log is the state object before assigning the new values although i used async/await to make sure that the console.log is after changing object values
3 Respostas
Responde à pergunta0
The problem is that navigator.geolocation.getCurrentPosition() doesn't return a Promise. It's an old-fashioned callback-based method, so doing await does nothing. In order to run console.log() after we know the position, you need to put your console.log() inside the callback function:
export const addHandlerSetPosition = function (handler) {
navigator.geolocation.getCurrentPosition(function (pos) {
state.lng = pos.coords.longitude;
state.lat = pos.coords.latitude;
handler(state.lng, state.lat);
console.log(state); // here
});
};
You can, however, make it an async function if you'd like. Here's how you can do it:
function getPosition(options) {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(
resolve,
reject,
options
);
});
}
export const addHandlerSetPosition = async function (handler) {
const pos = await getPosition(); // now await works!
state.lng = pos.coords.longitude;
state.lat = pos.coords.latitude;
handler(state.lng, state.lat);
console.log(state);
};
To sum up, await only makes sense if a function or method returns a Promise.
0
Because navigator.geolocation.getCurrentPosition is a function, that returns void instead of a promise, so your await statement gives no effect. 
If you do want to await this code, you can do something like this
const getPosition = new Promise((resolve) => {
navigator.geolocation.getCurrentPosition((position) => {
resolve(position);
})
});
const state = {
lat: "",
lng: "",
};
position = await getPosition;
state.lat = position.coords.latitude;
state.lng = position.coords.longitude;
console.log('State is: ', state);
0
Its because await only waits on Promises and getCurrentPosition() does not return an promise.
Take a look at the interface:
interface Geolocation {
clearWatch(watchId: number): void;
getCurrentPosition(successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, options?: PositionOptions): void;
watchPosition(successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, options?: PositionOptions): number;
}
You see at the very right it says void that means undefined
However you can promisfy your function like:
function getPos(){
return new Promise((res, rej) => {
navigator.geolocation.getCurrentPosition(res, rej)
})
}
export const addHandlerSetPosition = async function (handler) {
let pos = await getPos()
state.lng = pos.coords.longitude;
state.lat = pos.coords.latitude;
handler(state.lng, state.lat);
console.log(state);
};