如何捕获来自另一个异步函数的错误

Question

我有一个包含 2 个异步函数的脚本。第一个从 promisified navigator.geolocation.getCurrentPostition 获取地理位置数据，然后使用 geocode.xyz 进行反向地理位置数据。我将整个函数放在一个 try/catch 块中，然后如果生成一个错误，它会执行 console.log 错误。我可以通过将 url 修改为无法解决的错误来生成错误。到目前为止，一切正常。

问题是当我从另一个异步函数调用该异步函数时。在第二个函数中，我也有一个 try/catch 块，问题是，catch 永远不会执行。

我的目标是创建一个带有错误的 TextNode 并将其附加到 div，而不是将地理位置数据附加到 div。这是我的 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);

这里有2支代码笔-fetch working and force error (wrong DNS name)

Answer 1

The problem is when I am calling that async function from another async function. In the second function, I also have a try/catch block, the problem is, the catch never gets executed.

如果你的意思是 populateData 中的 catch 块永远不会被 getAddress 中的错误触发，那是因为你已经明确地用 [=13= 处理了错误]/catch 在 getAddress。这与同步函数没有什么不同：如果你处理了错误，它就会停止在调用链中向上传播。

或者：

不处理错误（通常您不希望在入口点函数以外的任何地方处理错误——事件处理程序等）以便它传播
如果您需要在getAddress中处理它，要么re-throw它来自catch中的[=] 12=] 或具有 getAddress return 失败值（例如 null）。

但是 getAddress 中的 catch 处理程序只是记录并抑制错误，所以 #1 是可行的方法。

如何捕获来自另一个异步函数的错误

How to catch an error coming from another async function

javascript

try-catch

async-await