async function try catch 块是否可以包装一个也可能引发错误的调用 async function？

Question

我有以下代码：

const getJSON = async function(url, errorMsg = 'Something went wrong') {
  return fetch(url).then(response => {
    if (!response.ok) throw new Error(`${errorMsg} (${response.status})`);

    return response.json();
  });
};

const outerFunc = async function() {
  try {
    let x = await getJSON();
  } catch (err) {
    console.log(err);
  }
}

outerFunc();

我试图在控制台中运行代码并出现错误：

VM60:2 Fetch API 无法加载 chrome://new-tab-page/undefined。 URL 方案“chrome”不受支持。

我想了解 **outerFunc ** function 周围的try/catch块是否可以捕获来自调用的异步 function ( asyncFunction ) 的错误，或者asyncFunction应该自己处理它的错误。 我知道在 Java 中可以“传播”错误。 JS 中的正确行为是什么？

Answer 1

通常，您希望在某个点捕获错误，以便您可以对错误做出有用的响应。 通常，这不是调用 API 的点，而是调用堆栈更上层的某个地方。 允许错误自然向上传播到可以合理处理的地方是一个好主意。

例如，在实际应用程序中，如果有一个仅由console.log组成的 catch 块，这通常（并非总是）表明应该在其他地方捕获错误。 当出现错误时，人们通常会想通知用户出现了问题，因此以下这种模式非常常见：

getAPI()
  .then(populateWithResults)
  .catch((error) => {
    const div = document.querySelector('.errors').appendChild(document.createElement('div'));
    div.textContent = 'There was an unexpected error: ' + error.message;
  });

其中getAPI不会自己捕获，而只是允许调用者处理可能的错误 - 类似于您的getJSON function 正在做的事情。

通常你只想要一个错误被捕获的点，但偶尔你可能想要在多个地方捕获它 - 例如，也许一个子组件想要在遇到错误时做一些特别的事情，但它也想要通知呼叫者有问题。 在这种情况下，重新抛出错误可能如下所示：

const makeSubComponent = () => {
  const componentContainer = document.querySelector('.container');
  const populateSubComponent = () => {
    // ...
  };
  return getAPI()
    .then(populateSubComponent)
    .catch((error) => {
      componentContainer.textContent = 'Something went wrong...'
      throw error; // Inform the caller of makeSubComponent of the error
    });
};

允许makeSubComponent及其调用者处理可能出现的问题。