Nuxt3中server/api调用远程API的错误捕获与响应传递

问题原因 #

当前你的服务端server/api/getCompany.ts中，调用外部API时的错误仅在服务端打印日志，没有将错误状态码、错误信息返回给前端；而前端的onRequestError仅能捕获前端发起请求到服务端过程中的错误（比如网络中断），无法获取服务端调用外部API时的错误。

解决方案 #

1. 修改服务端API，主动返回错误信息 #

在server/api/getCompany.ts中，捕获外部API的错误，使用Nuxt提供的createError方法将错误信息和状态码返回给前端：

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()
  const baseURL = config.public.apiBase

  try {
    const company = await $fetch(`${baseURL}/company?bookingAppApiKey=${config.apiSecret}`)
    return company
  } catch (error) {
    // 提取外部API返回的错误信息和状态码
    const errorMessage = error?.response?._data?.message || '请求外部API失败'
    const statusCode = error?.response?.status || 500
    
    // 打印服务端日志
    console.log('[外部API请求错误]', statusCode, errorMessage)
    
    // 返回错误给前端
    throw createError({
      statusCode,
      statusMessage: errorMessage,
      message: errorMessage
    })
  }
})

2. 前端组件捕获服务端返回的错误 #

在<TestApi>组件中，通过try/catch捕获服务端返回的错误，或者使用$fetch的onResponseError钩子处理：

<template>
  <div>
    <div>Check developer console!</div>
  </div>
</template>

<script setup>
onMounted(async () => {
  try {
    const company = await $fetch('/api/getCompany')
    console.log('请求成功:', company)
  } catch (error) {
    // 捕获服务端返回的错误信息和状态码
    console.log('[API请求错误]', {
      statusCode: error.statusCode,
      message: error.message
    })
  }
})
</script>

或者使用$fetch的钩子实现：

<script setup>
onMounted(async () => {
  await $fetch('/api/getCompany', {
    async onResponseError({ response, error }) {
      console.log('[API响应错误]', {
        statusCode: response.status,
        message: error.message
      })
    }
  })
})
</script>

说明 #

• 服务端使用createError抛出错误时，Nuxt会自动将错误封装为HTTP响应返回给前端，包含状态码和错误信息。
• 前端通过try/catch或onResponseError可以获取到服务端传递的错误详情，进而做对应的错误处理（比如提示用户、重试请求等）。

内容的提问来源于stack exchange，提问作者pi_ron