在unjs/ofetch中正确处理错误响应体的方法

在使用unjs/ofetch进行HTTP请求时，开发者经常会遇到需要处理错误响应的情况。当服务器返回错误状态码时，我们通常需要获取响应体中的详细信息以便进行错误处理或日志记录。

常见问题场景

许多开发者在尝试使用response.json()方法解析错误响应体时会遇到"Body already used"的错误。这是因为响应体是一个可读流，一旦被读取就无法再次使用。这种设计是为了优化性能，避免重复读取相同的流数据。

解决方案

unjs/ofetch提供了一个更优雅的方式来访问已解析的响应数据。通过response._data属性，开发者可以直接获取已经解析完成的响应体内容，而无需手动调用.json()方法。

实际应用示例

const response = await ofetch(documentUrl, {
  method: "POST",
  body: requestBody,
  async onResponseError({ request, response }) {
    // 正确的错误日志记录方式
    console.log(
      "[fetch response error]",
      request,
      response.status,
      response._data // 直接访问已解析的数据
    )
  },
})

技术原理

unjs/ofetch在内部会自动处理响应体的解析工作。当请求完成时，它会将解析后的数据存储在_data属性中。这种设计不仅解决了"Body already used"的问题，还提高了代码的执行效率，因为响应体只需要被解析一次。

最佳实践建议

1. 始终优先使用response._data而不是手动解析响应体
2. 在处理错误响应时，考虑错误数据的结构一致性
3. 对于大型响应体，ofetch的这种设计能显著提升性能
4. 在日志记录中，可以结合状态码和错误数据提供更全面的错误信息

通过遵循这些实践，开发者可以更高效地使用unjs/ofetch处理HTTP请求和错误响应，构建更健壮的应用程序。