为什么 try…catch 捕获不到异步函数里的错误？

a'ゞ沁仪提问于 2026-03-21 09:28:20 阅读 5

前端

我在用 async/await 写接口请求，但发现 try…catch 好像没生效，错误直接抛到控制台了，根本没进 catch 块。是不是写法有问题？

我试过把 await 放在 try 里面，也确认函数是 async 的，但还是不行。比如下面这段代码：

<script>
async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.log('捕获到错误:', err); // 这行没执行！
  }
}
fetchData();
</script>

网络请求失败时（比如 500 状态），控制台直接报 Uncaught (in promise) TypeError，而不是走我的 catch 分支，这到底怎么回事？

错误处理

我来解答赞 2 收藏

反馈

1 条解答

迷人的玉轩 Lv1

这个问题挺常见的，主要是因为异步操作和 Promise 的特性导致的。在你的情况下，try...catch 应该是能捕获到错误的，如果它没有生效，可能是由于以下几个原因：

1. 网络请求本身没有抛出错误：fetch API 在网络错误时（如无网络连接）才会拒绝 Promise，对于 HTTP 错误（如 404, 500 等），它依然会解析响应，不会自动抛出错误。因此，你需要手动检查响应状态并抛出错误。

2. Promise 链未被正确处理：确保你的代码逻辑中所有可能产生异常的地方都被正确地包裹在 try...catch 中。

针对第一个问题，你可以通过检查响应的状态码来决定是否抛出错误。以下是修改后的代码示例：

async function fetchData() {

  try {

    const res = await fetch('/api/data');



    // 检查响应状态码，如果不是 2xx 或 3xx，则抛出错误

    if (!res.ok) {

      throw new Error(HTTP error! Status: ${res.status});

    }



    const data = await res.json();

    console.log(data);

  } catch (err) {

    console.log('捕获到错误:', err); // 这行应该会执行了

  }

}

fetchData();

在这段代码中，我们添加了一个条件判断 if (!res.ok)，用于检查响应的状态码。如果状态码不在 200 到 299 之间，我们就手动抛出一个错误，这样 catch 块就能捕获到这个错误了。

第二个问题通常出现在你有多个异步操作并且没有正确地将它们全部包裹在 try...catch 中。在你的例子中，只要 await fetch 和 await res.json() 都在 try 块内，就没有问题。

需要注意的是，如果你在异步函数内部还有其他可能抛出异常的操作，也应该确保它们被包含在同一个 try...catch 块中，或者单独处理它们各自的异常。这样可以避免一些难以追踪的错误。

2026-03-21 10:08