当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript TransformStream 怎样组织自定义转换管道

JavaScript TransformStream 怎样组织自定义转换管道

来源：17golang原创 2026-10-29 08:00:30 0浏览收藏

如果一个前端数据源需要经过“清理文本、补充字段、再编码”这样的连续处理，最容易失控的写法是把所有逻辑塞进一个回调。TransformStream 更适合把每个转换阶段拆开：它有一个 writable 输入端和一个 readable 输出端，使用 pipeThrough() 就能把多个阶段接成管道。

本文只围绕一个可复用的 JavaScript 转换管道展开：先去掉每个文本块两侧空白，再添加统一前缀。这样既能看清最小写法，也能看清每个参数的职责。

官方资料：https://developer.mozilla.org/en-US/docs/Web/API/TransformStream

先看 TransformStream 的两端

new TransformStream(transformer) 返回一个转换节点。上游写入 writable，下游从 readable 读取；转换器对象可以实现 start、transform 和 flush。真正的组合点是 ReadableStream.prototype.pipeThrough()：它返回下一个可读流，而不是把当前流永久消费掉。

TransformStream 输入流、两个转换阶段和输出流的静态关系说明图 — 图1：TransformStream 管道结构说明图，展示 readable、writable 与多个转换节点的静态关系，不是运行截图。

用 pipeThrough 组织两个自定义阶段

下面的两个转换器各自只做一件事。第一个处理输入块，第二个接收第一个阶段的结果。示例中的源流只是为了说明连接方式，实际项目中可以替换为 fetch() 响应体或其他可读流。

// 第一个阶段：清理每个文本块的首尾空白
const trimStream = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(String(chunk).trim());
  }
});

// 第二个阶段：给已经清理的文本统一添加前缀
const prefixStream = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(`[消息] ${chunk}`);
  }
});

// 用一个简单的源流演示两个阶段的组合关系
const source = new ReadableStream({
  start(controller) {
    controller.enqueue("  第一条  ");
    controller.enqueue("第二条");
    controller.close(); // 没有更多输入时关闭源流
  }
});

const result = source
  .pipeThrough(trimStream)
  .pipeThrough(prefixStream);

// 读取最终输出；真实项目也可以继续 pipeThrough 下一个阶段
const reader = result.getReader();
for (;;) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log(value);
}

这个连接方式的重点不是把两个回调写在一起，而是让每个转换器都遵守同一个输入/输出契约。后续要增加 JSON 解析或编码阶段时，只需要继续调用 pipeThrough()，不必改写已有阶段。