前端/移动开发面试题更新 2026-08-05

在AI爆款文章创作器项目里,当大纲采用流式输出时,前端应如何解析尚未完整返回的JSON数据?

前端/移动开发风险判断技术原理问题排查SSE

考察说明

考察对SSE流式数据传输中处理不完整JSON的解析策略及异常处理能力。

回答思路

  1. 【回答框架 1】使用SSE(Server-Sent Events)接收流式数据,前端通过EventSource或fetch的ReadableStream读取数据块。针对不完整JSON,需采用增量解析策略,将缓冲区内不完整的JSON片段进行暂存,等待后续数据到达后拼接再解析。
  2. 【回答框架 2】具体方案可选用JSON.parse结合try-catch检测解析失败,捕获SyntaxError后,将当前缓冲数据暂存,待下一数据块到达时拼接再尝试。为提高效率,可引入流式JSON解析器(如Oboe.js),它支持分块解析并触发事件,避免频繁拼接和解析。
  3. 【回答框架 3】针对大纲流式输出的特点,可对数据结构进行约定,例如按段落或章节发送完整对象,减少不完整JSON出现的概率。同时设置超时或最大缓冲区限制,防止请求挂起或内存溢出。
  4. 【回答框架 4】处理过程中还需考虑网络中断、数据乱序等问题,需设计重连机制和前端状态管理,确保最终能渲染完整大纲,并对中途异常进行用户提示。
  5. 【回答框架 5】若数据仍无法解析,可回退到一次性获取完整大纲的接口,保证功能可用性。
  6. 【关键点 1】增量解析需维护缓冲区,拼接后尝试JSON.parse,失败则等待后续数据。
  7. 【关键点 2】使用try-catch捕获SyntaxError判断JSON不完整,而非错误处理业务异常。
  8. 【关键点 3】优先选择流式JSON解析器(如Oboe.js)减少重复解析开销,或设计按块发送完整对象。
  9. 【关键点 4】设置超时和缓冲区大小限制,处理网络异常并支持重连。
  10. 【关键点 5】最终可提供完整数据接口作为降级方案,确保用户体验。
  11. 【易错点 1】不能直接将每个数据块单独JSON.parse,可能频繁报错并丢失数据上下文。
  12. 【易错点 2】不可无限缓存不完整数据,需设置大小或时间限制,避免内存增长。
  13. 【易错点 3】不能忽视SSE连接中断情况,需设计重连和状态同步,避免前端长时间等待。