如何在Nuxt 3（SSR: false）中用$fetch捕获登录请求的422错误？

你的控制台输出undefined，核心问题是代码里的变量作用域错误：你在$fetch的.catch()里定义了局部变量err，但后续试图在外部打印这个未定义的err，自然输出undefined。另外，直接返回err.data会丢失完整的错误上下文，不利于排查问题。

修正代码 #

推荐写法：用try/catch完整捕获错误 #

async login() {
  try {
    const response = await $fetch('/login', {
      method: 'POST',
      baseURL: this.baseURL,
      body: this.form,
      watch: false,
    })
    console.log('登录成功', response)
  } catch (err) {
    // 这里可以拿到完整的错误对象，包括422状态码和服务器返回的错误信息
    console.log('错误详情', err)
    // 单独提取服务器返回的错误数据
    console.log('错误内容', err.data)
  }
}

若坚持使用链式catch写法 #

async login() {
  const requestResult = await $fetch('/login', {
    method: 'POST',
    baseURL: this.baseURL,
    body: this.form,
    watch: false,
  }).catch((err) => {
    // 在catch内部打印错误，此时err是有效的
    console.log('错误详情', err)
    return err.data
  })

  // requestResult 要么是成功响应数据，要么是错误数据
  console.log('请求结果', requestResult)
}

补充说明 #

Nuxt 3的$fetch基于ohmyfetch实现，当服务器返回4xx/5xx这类错误状态码时，会自动抛出异常，错误对象包含status（状态码）、data（服务器返回的错误内容）等关键字段，方便你根据不同错误类型做后续处理。

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