Node.js 中 try-catch 为啥捕获不到异步错误？

闲人明明提问于 2026-02-28 16:20:20 阅读 16

前端

我在写一个 Vue 项目，用 axios 调后端接口，但 Node.js 服务端的异步操作出错时，try-catch 根本抓不到，页面直接白屏了，这咋办？

我试过在 async 函数里加 try-catch，但还是不行，是不是写法有问题？

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const fetchData = async () => {
  try {
    const res = await axios.get('/api/data')
    console.log(res.data)
  } catch (err) {
    console.error('请求失败', err)
  }
}
</script>

我来解答赞 3 收藏

反馈

1 条解答

Zz利君 Lv1

看了你的代码，前端这边的 try-catch 写法是没问题的，async/await 配合 axios 能正常捕获请求错误。

问题应该出在两个地方，我一个个说。

第一个是 Node.js 后端那边，经典的坑：传统的 try-catch 只能捕获同步代码的错误，异步回调里的错误它根本管不着。比如你后端写了这样的代码：

// 这样写捕获不到！

try {

  setTimeout(() => {

    throw new Error('炸了')

  }, 1000)

} catch (e) {

  console.log('抓到了', e)

}

这个 catch 永远不会触发，因为异步回调执行的时候，try-catch 块早就跑完了。解决方案是用 Promise 包一层，或者直接用 async/await：

// 正确姿势

const delay = (ms) => new Promise((resolve, reject) => {

  setTimeout(() => reject(new Error('炸了')), ms)

})



try {

  await delay(1000)

} catch (e) {

  console.log('这次能抓到了', e)

}

第二个问题在你的前端代码。你说页面白屏，很可能是 fetchData 这个函数被调用的时候没有正确处理。比如你在某个地方直接 fetchData() 调用它但没 await，或者根本没调用。

建议你检查几点：后端接口返回状态码是不是 200 但内容报错？axios 默认只对 4xx、5xx 状态码抛异常。如果后端返回 { code: 500, msg: '失败' } 这种结构，HTTP 状态码还是 200，那 axios 不会进 catch，你得自己判断：

const fetchData = async () => {

  try {

    const res = await axios.get('/api/data')

    if (res.data.code !== 200) {

      throw new Error(res.data.msg || '请求失败')

    }

    console.log(res.data)

  } catch (err) {

    console.error('请求失败', err)

  }

}

还有个排查思路，打开浏览器控制台的 Network 面板，看请求到底返回了啥，状态码是多少。再看看 Console 有没有红色的未捕获异常报错，把堆栈贴出来定位更准。

2026-02-28 17:09