为何流关闭时BYOB模式下ReadableStream的read方法不返回？

在浏览器中使用ReadableStreamBYOBReader时，确实存在这样的行为：当流在无排队数据的读取请求期间关闭，read()方法会一直挂起，而ReadableStreamDefaultReader的最后一次读取会正常返回{done: true}。以下是两种优雅的解决方式，无需依赖抛错或取消流的粗暴手段：

消费者侧：结合流的close事件做竞态处理 #

在调用read()时，同时监听流的close事件，通过Promise.race让read请求在流关闭时及时返回完成状态：

async function readBYOBWithClose(reader, bufferView) {
  // 监听流关闭事件，手动返回done状态
  const closeSignal = new Promise(resolve => {
    reader.readable.addEventListener('close', () => {
      resolve({ done: true, value: undefined });
    }, { once: true }); // 只监听一次，避免内存泄漏
  });

  const readPromise = reader.read(bufferView);
  return Promise.race([readPromise, closeSignal]);
}

使用这个封装后的方法替代原生read()，当流关闭时，即使read()还在等待数据，也会立刻返回{done: true}，不会挂起。

生产者侧：关闭前入队空缓冲区 #

如果你能控制流的生产者逻辑，在调用controller.close()前，先检查是否有未满足的读取请求（通过controller.desiredSize判断），如果有，先入队一个空的Uint8Array：

function closeBYOBStreamGracefully(controller) {
  // desiredSize > 0 表示存在待处理的读取请求
  if (controller.desiredSize > 0) {
    controller.enqueue(new Uint8Array(0));
  }
  controller.close();
}

这样，BYOBReader的当前read()会读取到这个空缓冲区，下一次调用read()时就会正常返回{done: true}，避免挂起。

这两种方法都能绕过浏览器当前的实现限制，无需抛出错误或取消流，符合优雅处理的需求。

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