Nuxt 4 useFetch组合式函数错误时如何获取响应体？

问题根源 #

1. Body已读报错：Nuxt的useFetch底层依赖的ofetch会自动解析响应体，当你在onResponseError拦截器中再次读取body时，它已经被消费完毕，因此抛出"Body is unusable: Body has already been read"错误。
2. catch不触发：useFetch内部已经封装了错误捕获逻辑，不会让Promise进入reject状态，而是将错误信息存入返回的error ref对象中，所以链式调用.catch()不会执行。

解决方案1：自定义ofetch实例，克隆响应体读取 #

创建自定义ofetch实例，在错误拦截器中克隆响应体（避免原响应体被消耗），再读取并保存响应体内容：

import { ofetch } from 'ofetch'

// 创建自定义fetch实例
const customFetch = ofetch.create({
  onResponseError({ response }) {
    // 克隆响应体，防止原body被读取后无法再次访问
    const clonedRes = response.clone()
    // 根据API返回格式选择text()或json()读取响应体
    return clonedRes.text().then(body => {
      // 将响应体挂载到response的_data字段，后续可通过error.value.data获取
      response._data = body
    })
  }
})

// 在useFetch中使用自定义实例
const { data, error } = await useFetch('/your-cms-api-path', {
  fetch: customFetch,
})

// 检查错误并获取响应体
if (error.value) {
  console.log('错误状态码:', error.value.statusCode)
  console.log('错误响应体:', error.value.data)
}

解决方案2：直接在useFetch的onError回调中处理 #

利用useFetch选项中的onError钩子，在回调里直接读取响应体（注意如果响应体可能被提前读取，同样需要克隆）：

const { data, error } = await useFetch('/your-cms-api-path', {
  async onError({ response }) {
    if (!response) return
    // 克隆响应体后读取
    const body = await response.clone().text()
    console.log('错误响应体内容:', body)
    // 也可以把body存到error对象里方便后续使用
    if (error.value) {
      error.value.body = body
    }
  }
})

注意事项 #

• 如果你的API返回JSON格式的错误体，将text()替换为json()即可。
• 不要依赖useFetch返回的Promise的.catch()，始终通过返回的error.value来判断和处理错误。

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