如何在React应用中解析无分隔符的application/x-json-stream格式数据？

当你遇到application/x-json-stream类型的HTTP响应，内容是无分隔符（甚至无换行）的连续JSON对象时，有几种可行的解析方式：

一、手动实现状态机解析 #

这种方式无需依赖外部模块，核心是通过跟踪JSON的括号深度，识别每个完整JSON对象的边界，再逐个解析。

代码示例 #

function parseJsonStream(rawContent) {
  const parsedResults = [];
  let bracketDepth = 0;
  let segmentStart = 0;

  for (let i = 0; i < rawContent.length; i++) {
    const char = rawContent[i];
    if (char === '{') {
      bracketDepth++;
    } else if (char === '}') {
      bracketDepth--;
      // 回到顶层括号，说明当前是完整的JSON对象
      if (bracketDepth === 0) {
        const jsonSegment = rawContent.slice(segmentStart, i + 1);
        try {
          parsedResults.push(JSON.parse(jsonSegment));
        } catch (err) {
          console.error('解析JSON片段出错:', err);
        }
        segmentStart = i + 1;
      }
    }
  }

  return parsedResults;
}

// 测试示例
const input = '{"key":"value"}{"key":{},{},{}}{"key":"value"}';
const output = parseJsonStream(input);
console.log(output);
// 输出：[{"key":"value"}, {"key":{},{},{}}, {"key":"value"}]

二、Node.js环境使用现成模块 #

在Node.js中，有成熟模块可直接处理这类流式JSON：

• jsonstream：支持将流式JSON解析为对象流，自动处理无分隔符的连续JSON
• split2 + JSON.parse：配合使用，先按JSON边界分割流，再逐个解析

这些模块可通过npm安装，直接在项目中引入使用。

三、浏览器环境流式处理 #

如果用Fetch API获取响应，建议用ReadableStream逐块读取内容，避免一次性加载过大响应体，再结合状态机逻辑处理：

async function fetchAndParseStream(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  const parsedResults = [];
  let buffer = '';
  let bracketDepth = 0;

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    buffer += decoder.decode(value, { stream: true });
    let segmentStart = 0;

    for (let i = 0; i < buffer.length; i++) {
      const char = buffer[i];
      if (char === '{') bracketDepth++;
      else if (char === '}') {
        bracketDepth--;
        if (bracketDepth === 0) {
          const jsonSegment = buffer.slice(segmentStart, i + 1);
          try {
            parsedResults.push(JSON.parse(jsonSegment));
          } catch (err) {
            console.error('解析片段失败:', err);
          }
          segmentStart = i + 1;
        }
      }
    }

    // 保留未完成的JSON片段，用于下一次拼接处理
    buffer = buffer.slice(segmentStart);
  }

  // 处理最后剩余的内容
  if (buffer.trim()) {
    try {
      parsedResults.push(JSON.parse(buffer));
    } catch (err) {
      console.error('剩余内容解析失败:', err);
    }
  }

  return parsedResults;
}

内容的提问来源于stack exchange，提问作者Chinnmay B S