深入理解unjs/ofetch中Response.blob()的使用问题

背景介绍

在JavaScript的Fetch API中，Response对象提供了多种方法来处理不同类型的响应数据，其中blob()方法用于将响应体读取为Blob对象。然而，当我们在unjs/ofetch库中使用这一功能时，可能会遇到r2.blob is not a function的错误提示。

问题本质

这个问题源于unjs/ofetch库对原生Fetch API的封装方式。ofetch默认会对响应进行预处理，返回一个已经解析过的响应对象，而不是原生的Response对象。当我们尝试调用blob()方法时，实际上是在处理一个已经被处理过的响应对象，而非原生的Response对象，因此会出现方法不存在的错误。

解决方案

要解决这个问题，我们需要使用ofetch的raw模式。raw模式会返回未经处理的原始响应对象，保留了所有原生Response的方法，包括blob()。具体实现方式如下：

const fetch = $fetch.create({
  responseType: 'stream',
  onResponse({ response }) {
    // 这里可以验证我们确实获得了原始响应
  },
});

// 使用raw方法获取原生Response
const rawFetch = fetch.raw;

实际应用场景

这种问题常见于需要处理二进制数据的场景，例如：

1. 图片或文件下载
2. 音频/视频流处理
3. 需要直接操作二进制数据的API调用

技术原理深度解析

ofetch库的设计初衷是简化Fetch API的使用，因此默认会对响应进行自动解析。这种设计对于大多数JSON API调用非常方便，但对于需要直接操作原始响应的情况就不太适用。raw模式实际上是绕过了ofetch的响应处理管道，直接返回了浏览器原生的Response对象。

最佳实践建议

1. 对于常规的JSON API调用，继续使用ofetch的默认行为
2. 当需要访问原生Response方法(如blob(), arrayBuffer(), text())时，使用raw模式
3. 在创建自定义fetch实例时，明确设置responseType参数
4. 对于复杂的二进制数据处理，考虑使用专门的流处理库

总结

理解ofetch库的设计哲学和内部工作机制对于正确使用它至关重要。虽然默认的简化接口适合大多数场景，但在处理特殊数据类型时，我们需要知道如何访问底层的原生功能。通过合理使用raw模式，我们可以在享受ofetch便利性的同时，不失去对底层功能的控制权。