Tengo un script que contiene 2 funciones asíncronas. El primero obtiene datos de ubicación geográfica de un navigator.geolocation.getCurrentPostition prometido y luego invierte la ubicación geográfica usando geocode.xyz . Tengo toda la función en un bloque try/catch que luego hace un console.log del error, si se genera uno. Puedo generar un error modificando la URL a una que no se puede resolver. Hasta ahora, esto está funcionando bien.
El problema es cuando llamo a esa función asíncrona desde otra función asíncrona. En la segunda función, también tengo un bloque try/catch, el problema es que el catch nunca se ejecuta.
Mi objetivo es crear un TextNode con el error y agregarlo a un div, en lugar de agregar los datos de ubicación geográfica al div. Aquí está mi código JS:
const options = { enableHighAccuracy: true, }; const getPosition = () => { return new Promise((resovle, reject) => { navigator.geolocation.getCurrentPosition(resovle, reject, options); }); }; const getAddress = async () => { try { const pos = await getPosition(); const { latitude: lat, longitude: lng } = pos.coords; const resGeo = await fetch(`https://ggeocode.xyz/${lat},${lng}?geoit=json`); console.log(`The resGeo response is ${resGeo}`); const dataGeo = await resGeo.json(); const streetNumber = dataGeo.stnumber; const streetName = dataGeo.staddress; const suburb = dataGeo.city; const address = `${streetNumber} ${streetName}, ${suburb}`; return address; } catch (err) { console.log(`An error has occured: ${err.message}`); } }; const populateData = async () => { try { showLoader(); const address = await getAddress(); const container = document.querySelector(".container"); addressContent = document.createTextNode(`Your address is: ${address}`); container.appendChild(addressContent); hideLoader(); } catch (err) { errorContent = document.createTextNode( `An error has occured: ${err.message}` ); container.appendChild(errorContent); } }; const showLoader = () => { const loader = document.querySelector("#loader"); loader.classList.add("display"); }; const hideLoader = () => { const loader = document.querySelector("#loader"); loader.classList.remove("display"); }; const button = document.querySelector("#button"); button.addEventListener("click", populateData);Aquí hay 2 bolígrafos de código: buscar trabajo y forzar error (nombre de DNS incorrecto)
El problema es cuando llamo a esa función asíncrona desde otra función asíncrona. En la segunda función, también tengo un bloque try/catch, el problema es que el catch nunca se ejecuta.
Si quiere decir que el bloque catch en populateData nunca se activa por un error en getAddress , eso es porque ha manejado explícitamente el error con un try / catch en getAddress . Esto no es diferente a las funciones sincrónicas: si maneja el error, deja de propagarse en la cadena de llamadas.
O:
No maneje el error (por lo general, no desea manejar los errores en ningún otro lugar que no sea en las funciones del punto de entrada, controladores de eventos y demás) para que se propague
Si necesita manejarlo en getAddress , vuelva a lanzarlo desde la catch en getAddress o haga que getAddress devuelva un valor de falla ( null , por ejemplo).
Pero su controlador de catch en getAddress solo registra y suprime el error, por lo que el n. ° 1 sería el camino a seguir.