如何流式调用OpenAI Completion API？

要处理OpenAI流式返回的SSE格式数据，核心是逐行解析响应流，过滤空行并去除每行的data: 前缀后再解析JSON。以下是具体实现：

代码示例 #

async function streamOpenAICompletion() {
  const apiKey = 'YOUR_OPENAI_API_KEY'; // 注意：客户端直接暴露密钥存在被盗用风险
  const response = await fetch('https://api.openai.com/v1/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'text-davinci-002',
      prompt: '请输入你的提示文本',
      max_tokens: 100,
      stream: true // 必须开启流式返回参数
    })
  });

  if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`);
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8');
  let buffer = ''; // 暂存不完整的行数据

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

    // 解码当前流片段并追加到缓冲区
    buffer += decoder.decode(value, { stream: true });
    // 按换行分割成多行
    const lines = buffer.split('\n');
    // 最后一行可能不完整，留到下一次循环处理
    buffer = lines.pop();

    for (const line of lines) {
      // 过滤空行和非data开头的行
      if (!line.trim() || !line.startsWith('data: ')) continue;
      
      // 去除"data: "前缀
      const jsonStr = line.slice(6);
      // 处理流式结束标记
      if (jsonStr === '[DONE]') continue;

      try {
        const data = JSON.parse(jsonStr);
        // 获取当前返回的文本片段
        const text = data.choices[0].text;
        console.log(text);
        // 可将文本插入到页面DOM中，例如：
        // document.getElementById('output-container').textContent += text;
      } catch (err) {
        console.error('JSON解析失败:', err);
      }
    }
  }
}

// 调用流式请求函数
streamOpenAICompletion().catch(err => console.error(err));

关键要点说明 #

• 缓冲区处理：流的返回片段可能截断单行数据，用buffer暂存未处理的部分，确保每行数据完整后再解析。
• 行过滤逻辑：仅处理以data: 开头的行，跳过空行和结束标记data: [DONE]。
• 密钥风险提示：客户端直接嵌入API密钥会导致密钥泄露，生产环境建议通过后端代理（如Flask可手动实现流式响应转发）处理请求，避免密钥暴露。

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