深入解析unjs/ofetch中的Response对象处理问题

背景介绍

unjs/ofetch是一个基于Fetch API的轻量级HTTP客户端库，提供了更简洁的API和额外的功能。在实际使用中，开发者可能会遇到Response对象处理的相关问题，特别是在使用ofetch.raw方法时。

问题现象

当开发者使用ofetch.raw方法获取响应时，尝试调用响应对象的json()方法会抛出错误。错误信息显示"Body is unusable"或"body stream already read"，这表明响应体已经被读取过，无法再次读取。

技术原理

在Fetch API的设计中，Response对象的body是一个可读流，只能被消费一次。当使用json()、text()或blob()等方法读取响应体后，流就会被标记为已消费，无法再次读取。

ofetch.raw方法内部已经自动处理了响应体，将解析后的数据存储在_data属性中。因此直接访问response._data即可获取已经解析好的数据，无需再次调用json()方法。

解决方案

正确的做法是直接访问响应对象的_data属性，而不是尝试再次解析响应体：

const response = await ofetch.raw(url)
const data = response._data // 直接获取已解析的数据

最佳实践

1. 明确需求选择方法：

   • 如果只需要数据，使用ofetch默认方法
   • 如果需要完整响应对象，使用ofetch.raw并访问_data
   • 如果需要原生Fetch行为，使用ofetch.native

2. 错误处理：

   try {
     const response = await ofetch.raw(url)
     const data = response._data
     // 处理数据
   } catch (error) {
     // 错误处理
   }
   

3. 与第三方库集成： 当需要将ofetch与其他库集成时，确保了解库对Fetch API的具体要求。有些库可能需要原生Fetch行为，这时应使用ofetch.native而非ofetch.raw。

总结

理解Fetch API的响应体只能被消费一次这一特性非常重要。unjs/ofetch通过_data属性提供了便捷的访问方式，开发者应该利用这一特性而不是尝试重复解析响应体。正确使用这些方法可以避免常见的错误，并编写出更健壮的代码。