如何在Nuxt应用中获取Laravel API返回的422验证错误信息？

问题原因 #

Nuxt的useFetch默认会把非2xx状态码的HTTP响应判定为请求失败，此时会直接抛出异常，不会把错误响应数据包含在返回的response对象里。这就是你能在浏览器控制台网络面板看到错误响应，但没法通过response常量直接访问的核心原因。

解决方案 #

你可以通过try/catch捕获异常，或者利用useFetch的错误处理配置来获取错误响应数据，以下是具体实现方式：

方法1：用try/catch捕获异常 #

把useFetch调用包裹在try/catch块中，在catch里处理422错误：

try {
  const { data } = await useFetch('/api/subscribers', {
    method: 'POST',
    body: {
      email: form.value.email
    }
  })
  // 请求成功时处理返回的message
  if (data.value) {
    console.log(data.value.message)
  }
} catch (err) {
  // 针对422状态码处理验证错误
  if (err.response?.status === 422) {
    const validationErrors = err.response._data.errors
    console.log('验证错误详情:', validationErrors)
  }
}

方法2：利用useFetch的错误处理选项 #

方式A：使用onError回调

直接在useFetch配置中添加onError回调处理错误：

const { data } = await useFetch('/api/subscribers', {
  method: 'POST',
  body: {
    email: form.value.email
  },
  onError: (err) => {
    if (err.response?.status === 422) {
      const validationErrors = err.response._data.errors
      console.log('验证错误详情:', validationErrors)
    }
  }
})

// 请求成功时处理数据
if (data.value) {
  console.log(data.value.message)
}

方式B：设置ignoreErrors: true

开启ignoreErrors后，useFetch不会抛出异常，可直接从返回的error对象中获取响应：

const { data, error } = await useFetch('/api/subscribers', {
  method: 'POST',
  body: {
    email: form.value.email
  },
  ignoreErrors: true
})

if (error.value) {
  if (error.value.response?.status === 422) {
    const validationErrors = error.value.response._data.errors
    console.log('验证错误详情:', validationErrors)
  }
} else {
  // 请求成功时处理数据
  console.log(data.value.message)
}

补充说明 #

Laravel返回的$validator->errors()转为JSON后，结构是键为字段名、值为错误信息数组的格式，示例如下：

{
  "errors": {
    "email": ["邮箱格式不正确", "该邮箱已被注册"]
  }
}

你可以根据这个结构在页面上渲染对应的验证错误提示。

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