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);
};
我想知道為什么 console.log 的輸出是分配新值之前的狀態物件，盡管我使用 async/await 來確保 console.log 是在更改物件值之后
uj5u.com熱心網友回復：
問題是navigator.geolocation.getCurrentPosition()不回傳Promise. 這是一個老式的基于回呼的方法，所以什么await都不做。為了console.log()在我們知道位置后運行，你需要把你console.log()的回呼函式放在里面：
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
});
};
但是，如果您愿意，可以將其設為異步函式。您可以這樣做：
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);
};
總而言之，await只有在函式或方法回傳Promise.
uj5u.com熱心網友回復：
因為navigator.geolocation.getCurrentPosition是一個函式，它回傳 void 而不是 promise，所以你的 await 陳述句不起作用。
如果您確實想等待此代碼，則可以執行以下操作
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);
uj5u.com熱心網友回復：
它因為await只有等待上Promises并getCurrentPosition()沒有回傳的承諾。
看一下界面：
interface Geolocation {
clearWatch(watchId: number): void;
getCurrentPosition(successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, options?: PositionOptions): void;
watchPosition(successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, options?: PositionOptions): number;
}
你在最右邊看到它說void這意味著undefined
但是，您可以承諾您的功能，例如：
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);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/321731.html
標籤：javascript 异步 异步等待
上一篇：這段代碼片段中的async/await是如何作業的？
下一篇：飛鏢中的異步