使用OpenAI API流式获取ChatGPT响应时遇getReader未定义错误

你遇到的问题核心是代码里的两处错误，以下是具体原因和修正方案：

错误1：未接收fetch的异步返回值 #

fetch是异步操作，返回Promise对象，你当前代码没有用await获取它的返回结果，导致response变量未定义，自然会出现response.body为undefined的报错。

错误2：stream: true参数位置错误 #

OpenAI API的流式响应开关需要放在请求body参数里，而非fetch的配置选项中。你现在把stream: true写在了fetch的第二个参数（options）里，这不会被OpenAI服务识别，因此不会返回流式响应，response.body也就没有可读取的流内容。

修正后的完整代码 #

const API_KEY = "..."; // 替换为你的API密钥
const API_URL = "https://api.openai.com/v1/chat/completions";

const getResponse = async () => {
  try {
    // 用await接收fetch的异步返回值
    const response = await fetch(API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${API_KEY}`,
        "Accept": "text/event-stream" // 显式指定接收流式响应类型，避免环境兼容问题
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo",
        messages: [
          {
            role: "system",
            content: "10 words sentence",
          },
        ],
        stream: true // 将stream参数移到body内，这才是OpenAI要求的位置
      }),
    });

    // 现在可以正常获取Reader了
    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    // 处理流式响应的逻辑
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      const chunk = decoder.decode(value);
      // 解析OpenAI返回的SSE格式数据
      const lines = chunk.split("\n").filter(line => line.trim() !== "" && line.startsWith("data:"));
      for (const line of lines) {
        const data = line.replace(/^data: /, "");
        if (data === "[DONE]") continue;
        const parsed = JSON.parse(data);
        console.log(parsed.choices[0].delta.content || "");
      }
    }

  } catch (error) {
    console.error(error);
  }
};

额外注意事项 #

• 确保你的API密钥有调用gpt-3.5-turbo模型的权限，且账户余额充足
• 前端环境直接请求OpenAI API会存在密钥泄露风险，建议通过后端代理转发请求

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