如何让JavaScript流的read()方法每次仅返回单个数据块？

MDN等平台中ReadableStream/getReader的常见实现存在特性：单次调用read()可能返回多个完整数据块，且两次read()间隔越久，返回的块数量越多。

这种特性会在特定场景下造成困扰：比如网络传输中每个数据块都是合法JSON，但多块拼接后无法解析。举例来说，原本独立的JSON块是{"value":1}、{"value":10}、{"value":null}，但read()可能直接返回拼接后的字符串{"value":1}{"value":10}{"value":null}，导致无法正常解析单个JSON对象。

更新补充：实际生产环境中，read()有时还会返回部分块内容，针对这两类问题（多块拼接、部分块），可以通过使用分隔符拆分或累积数据块的方式解决。

核心答案 #

原生的read()方法本身无法保证每次只返回单个数据块，这取决于流的底层实现和运行时的缓冲策略——浏览器或JS运行时会根据网络状况、缓冲阈值等自动合并数据块以优化性能。

若需要每次处理单个独立的数据块，需在读取层自行封装处理，常见方案有两种：

方案1：基于分隔符拆分 #

如果传输的每个数据块之间有明确分隔符（比如换行符\n），可累积读取到的数据，遇到分隔符就拆分出完整块：

async function processStreamWithDelimiter(reader, delimiter = '\n') {
  let buffer = '';
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += value;
    // 按分隔符拆分数据
    const chunks = buffer.split(delimiter);
    // 最后一个元素可能是不完整块，留到下次处理
    buffer = chunks.pop();
    // 逐个处理完整块
    for (const chunk of chunks) {
      if (chunk) {
        try {
          const data = JSON.parse(chunk);
          console.log('处理单个JSON块:', data);
        } catch (e) {
          console.error('JSON解析失败:', e);
        }
      }
    }
  }
  // 处理剩余的缓冲内容
  if (buffer) {
    try {
      const data = JSON.parse(buffer);
      console.log('处理最后一个块:', data);
    } catch (e) {
      console.error('剩余内容解析失败:', e);
    }
  }
}

方案2：累积数据直到完整JSON块 #

如果没有分隔符，可通过反复尝试解析累积的缓冲内容，判断是否得到完整的JSON对象：

async function processStreamWithJsonParse(reader) {
  let buffer = '';
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += value;
    // 循环尝试解析，直到无法得到完整JSON
    while (true) {
      try {
        let parseEndIndex = 0;
        const data = JSON.parse(buffer, (key, val) => {
          parseEndIndex = buffer.lastIndexOf(JSON.stringify(val));
          return val;
        });
        console.log('处理单个JSON块:', data);
        // 截取未解析的剩余内容
        buffer = buffer.slice(parseEndIndex + 1);
        if (!buffer) break;
      } catch (e) {
        // 解析失败，说明内容不完整，退出循环等待下一次读取
        break;
      }
    }
  }
  // 处理最后剩余的内容
  if (buffer) {
    try {
      const data = JSON.parse(buffer);
      console.log('处理最后一个块:', data);
    } catch (e) {
      console.error('剩余内容解析失败:', e);
    }
  }
}

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