0
379
Viewsel código se ejecuta antes de lo esperado, async/await no funciona como se esperaba
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); };Quiero saber por qué la salida de console.log es el objeto de estado antes de asignar los nuevos valores, aunque usé async/await para asegurarme de que console.log sea después de cambiar los valores de los objetos.
3 answers
Answer question0
El problema es que navigator.geolocation.getCurrentPosition() no devuelve una Promise . Es un método antiguo basado en devolución de llamada, por lo que await no hace nada. Para ejecutar console.log() después de conocer la posición, debe colocar su console.log() dentro de la función de devolución de llamada:
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 }); };Sin embargo, puede convertirlo en una función asíncrona si lo desea. Así es como puedes hacerlo:
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); }; En resumen, await solo tiene sentido si una función o método devuelve una Promise .
0
Debido a que navigator.geolocation.getCurrentPosition es una función que devuelve void en lugar de una promesa, por lo que su declaración de espera no tiene efecto. 
Si desea esperar este código, puede hacer algo como esto
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
Es porque await solo espera Promises y getCurrentPosition() no devuelve una promesa.
Echa un vistazo a la interfaz:
interface Geolocation { clearWatch(watchId: number): void; getCurrentPosition(successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, options?: PositionOptions): void; watchPosition(successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, options?: PositionOptions): number; } Verás a la derecha dice void que significa undefined
Sin embargo, puede prometer su función como:
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); };