Nuxt3中使用$fetch无法获取API返回的422错误详情咨询

在Nuxt3使用$fetch调用API时，遇到422状态码错误，默认只能捕获到通用的FetchError: 422 Unprocessable Content提示，无法直接拿到API返回的自定义错误数据（如包含message和errors的响应体）。

解决方法 #

Nuxt3的$fetch基于ofetch实现，当请求返回非2xx状态码时，抛出的错误对象会包含data属性，该属性就是API返回的原始错误响应数据。你可以在catch块中通过error.data获取业务自定义的错误信息。

修改后的代码示例 #

$fetch(`${runtimeConfig.public.BASE_API_BROWSER_URL}/XXX/`, {
  method: 'POST',
  body: {
    ...data
  }
})
.then((resp) => {
  message.value.push(resp.message)
  isSubmitting.value = false
})
.catch((error) => {
  // 优先获取API返回的自定义错误信息
  if (error.data?.message) {
    errors.value.push(error.data.message)
    // 若需要处理字段级错误，可遍历error.data.errors
    // Object.values(error.data.errors).flat().forEach(err => errors.value.push(err))
  } else {
    // 兜底处理其他类型错误
    errors.value.push(error.message)
  }
  isSubmitting.value = false
})

说明 #

• error.data直接对应API返回的错误响应体结构，你可以根据实际返回格式（如error.data.message或error.data.errors）提取所需信息。
• 添加可选链操作符?.是为了避免在非HTTP错误场景下出现属性不存在的报错。

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