React Native调用OpenAI流式API出现JSON解析错误求助

问题分析 #

你遇到的SyntaxError: JSON Parse error: Unexpected character: d/D，核心原因是OpenAI的流式响应采用Server-Sent Events(SSE) 分块传输，每个chunk并非完整JSON，而是以data: 为前缀的片段，还可能包含空行或data: [DONE]结束标记，直接解析整个chunk必然失败。

正确的流式响应处理步骤 #

针对React Native环境，修正后的chunk处理逻辑如下：

1. 核心处理逻辑 #

每个SSE chunk的标准格式是data: {JSON对象}\n\n，结束时会返回data: [DONE]\n\n。需要按以下步骤处理：

• 剥离每个chunk开头的data: 前缀
• 过滤空行或仅含空格的无效行
• 排除[DONE]结束标记
• 缓存不完整的chunk片段，避免因网络分片导致JSON截断

2. 修复后的代码示例 #

假设使用fetch发起流式请求，以下是完整的修正代码：

// 已获取到OpenAI密钥，发起流式请求
fetch('https://api.openai.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${yourOpenAIKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'gpt-3.5-turbo',
    messages: [{role: 'user', content: '你的问题内容'}],
    stream: true // 必须开启流式响应
  })
})
.then(response => {
  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8');
  let partialChunk = ''; // 缓存不完整的chunk内容

  function processNextChunk() {
    return reader.read().then(({done, value}) => {
      if (done) {
        console.log('流式响应已结束');
        return;
      }

      // 解码当前chunk并拼接缓存的内容
      partialChunk += decoder.decode(value, {stream: true});
      // 按换行分割，处理多行内容
      const lines = partialChunk.split('\n');
      // 保留最后一行可能不完整的内容，等待下一个chunk拼接
      partialChunk = lines.pop();

      lines.forEach(line => {
        line = line.trim();
        if (!line) return; // 跳过空行
        if (line.startsWith('data: ')) {
          const jsonContent = line.slice(6).trim();
          if (jsonContent === '[DONE]') {
            console.log('收到响应结束标记');
            return;
          }
          try {
            const parsedData = JSON.parse(jsonContent);
            // 提取流式返回的内容，更新UI或业务逻辑
            const content = parsedData.choices[0]?.delta?.content;
            if (content) {
              console.log('获取到流式内容:', content);
              // 这里可以更新你的React Native状态
            }
          } catch (err) {
            console.error('JSON解析失败:', err, '原始内容:', jsonContent);
          }
        }
      });

      return processNextChunk();
    });
  }

  return processNextChunk();
})
.catch(err => console.error('请求发送失败:', err));

3. 关键注意事项 #

• 缓存不完整chunk：网络传输可能将一个完整的JSON片段拆分成多个chunk返回，必须用partialChunk缓存未完成的内容，直到下一个chunk到来后拼接完整再解析。
• 严格过滤无效内容：必须确保只解析data: 前缀后的有效JSON部分，避免将前缀、空行或结束标记传入JSON.parse。
• 捕获解析异常：即使处理了标准情况，仍可能出现格式异常的chunk，需捕获错误并打印原始内容，方便排查问题。

额外排查方向 #

如果仍出现解析错误，建议：

• 打印每个处理前的原始chunk内容，确认是否存在非data: 开头的异常内容。
• 检查后端传递的OpenAI密钥是否有效，请求参数（如model、messages格式）是否符合OpenAI API要求。
• 确认React Native环境的TextDecoder和ReadableStream支持正常（RN 0.60+版本通常兼容）。

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