如何将Node.js的ReadableStream转Transform流逻辑迁移到浏览器实现

错误原因 #

• 浏览器的Streams API和Node.js的Stream API是两套独立标准，语法和实现逻辑不通用
• pipeThrough方法要求传入的参数是符合ReadableWritablePair规范的对象，你之前创建的是Node.js风格的Transform实例，没有自带readable和writable属性，所以触发类型转换错误

正确实现方案 #

直接使用浏览器原生提供的TransformStream构造函数创建转换流即可，示例代码如下：

// 1. 获取远端资源的ReadableStream
const resp = await fetch(remoteURL)
const downloadStream = resp.body
if (!downloadStream) throw new Error('响应体不可读')

// 2. 创建浏览器标准转换流，注意和Node.js Transform的语法区别
const resultTransform = new TransformStream({
  transform(chunk, controller) {
    // 此处写入你的转换逻辑，chunk为Uint8Array格式的二进制块
    // 处理完成后调用controller.enqueue(处理后的chunk)将结果推向下游
    // 转换出错则调用controller.error(错误对象)抛出异常
    // 示例：将所有字节值加1
    const processedChunk = new Uint8Array(chunk.length)
    for (let i = 0; i < chunk.length; i++) {
      processedChunk[i] = chunk[i] + 1
    }
    controller.enqueue(processedChunk)
  },
  flush(controller) {
    // 可选配置：所有chunk处理完成后执行的收尾逻辑
    // 如需追加额外内容可调用controller.enqueue(收尾数据块)
  }
})

// 3. 执行管道传输，返回处理后的ReadableStream
const processedStream = downloadStream.pipeThrough(resultTransform)

// 若需要拿到最终处理结果可继续转换，示例：
// 转文本：const resultText = await new Response(processedStream).text()
// 转Blob下载：const resultBlob = await new Response(processedStream).blob()

return processedStream

额外说明 #

如果你的项目需要兼容Node.js风格的流写法，可以引入Node.js流的浏览器端polyfill，将Node的Transform实例转换为符合浏览器标准的流对象后再传入pipeThrough即可。

内容的提问来源于stack exchange，提问作者Trangler