异步函数 try catch 块是否可以包装一个调用的异步函数，该函数也可能引发错误？

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 ** 函数周围的 try/catch 块是否可以捕获来自被调用的异步函数（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 函数正在执行的操作。

通常您只需要捕获错误的一个点，但有时您可能希望在多个位置捕获它 - 例如，可能某个子组件想要在遇到错误时做一些特别的事情，但是它还想通知调用者有问题。在这种情况下，重新抛出错误可能如下所示：

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 及其调用者处理可能出现的问题。