使用 fetch 实现请求数据预反序列化，核心做法是在获取到响应流后、解析为 json 之前，通过 readablestream 的 pipethrough 方法接入自定义转换器。具体而言，利用 textdecoderstream 将二进制流转为字符串，再配合一个基于正则或状态机的自定义 transformstream 对字符串进行预处理（如去除 bom、替换非法字符），最后由 json.parse 完成反序列化。这样做的好处是可以在内存中直接处理原始字节，避免先完整加载大字符串再进行二次转换的性能损耗。
如何构建用于清洗数据的 TransformStream？
构建 TransformStream 的关键在于实现 transform 和 flush 两个方法，以处理分块数据和尾部残留。在 transform(chunk, controller) 中，接收到的 chunk 是字符串片段，需要将其拼接到缓冲区内，并尝试从缓冲区中提取完整的 JSON 对象或有效数据段。如果检测到数据不完整，保留缓冲区内容供下一块拼接；如果提取出完整数据，则通过 controller.enqueue() 输出清洗后的结果。在 flush(controller) 中，处理流结束时的剩余缓冲区，确保没有数据丢失。这种机制允许我们在不改变 fetch 原有调用结构的前提下，插入任意复杂的数据清洗逻辑。
const cleanJsonStream = new TransformStream({
transform(chunk, controller) {
// chunk 是字符串片段
this.buffer += chunk;
// 假设我们要过滤掉非 JSON 内容的干扰字符
const cleaned = this.buffer.replace(/[^\x00-\x7F]/g, '');
controller.enqueue(cleaned);
},
flush(controller) {
if (this.buffer) {
controller.enqueue(this.buffer);
}
}
});
如何将 Fetch 响应与清洗流管道连接？
将 fetch 响应与清洗流连接，需要使用 response.body.pipeThrough() 方法。由于 fetch 返回的是二进制流，第一步必须通过 pipeThrough(new TextDecoderStream()) 将其转换为文本流。接着，将上一步输出的文本流再次通过我们自定义的 cleanJsonStream。最终得到的流是一个经过清洗的纯文本流，可以直接传递给 new Response(stream).json() 进行解析。这种方式保持了链式调用的简洁性，且所有转换都在流式环境中完成，无需等待整个响应体下载完毕。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
async function fetchAndClean(url) {
const response = await fetch(url);
// 1. 二进制转文本
// 2. 文本清洗
// 3. 构造新 Response 并解析 JSON
const cleanedResponse = new Response(
response.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(cleanJsonStream)
);
return await cleanedResponse.json();
}
当响应体包含无效 UTF-8 字节时如何处理？
当响应体包含无效 UTF-8 字节时，默认的 TextDecoderStream 会抛出错误导致流中断。解决方法是在 TextDecoderStream 初始化时传入 { fatal: false } 选项，这样解码器会将无法识别的字节替换为 Unicode 替换字符 而不是报错。随后，在自定义的 TransformStream 中，可以通过正则表达式 /[\uFFFD]/g 定位并移除这些替换字符，或者根据业务需求将其替换为默认值。这确保了即使源数据存在编码瑕疵，反序列化过程也能顺利完成，不会因单个坏字节而崩溃。
