如何用JavaScript调用OpenAI API获取数据并修复公司列表显示问题

核心问题分析 #

你的代码存在几个关键问题导致无法生成有效公司列表：

1. API端点过时：davinci-codex引擎已被废弃，OpenAI当前推荐使用Chat Completions API（如gpt-3.5-turbo）。
2. Token配额不足：max_tokens:50的限制太小，无法容纳20个公司的输出内容。
3. 输出格式未适配：直接将AI返回的文本塞进单个<li>，且未引导AI生成结构化输出，导致展示混乱。
4. 错误处理缺失：未处理API返回的业务错误（如密钥无效、额度不足等）。

修复后的完整代码 #

const form = document.querySelector('form');
const companiesOutput = document.querySelector('#output-companies');

function generateCampaign(event) {
  event.preventDefault();
  const jobDescription = document.querySelector('#job-description').value;

  // 清空之前的输出
  companiesOutput.innerHTML = '';

  fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [
        {
          role: "system",
          content: "你是行业分析师，需要根据用户提供的职位描述，输出20个同赛道的顶级VC投资初创公司，每个公司单独一行，不要添加额外编号或说明。"
        },
        {
          role: "user",
          content: jobDescription
        }
      ],
      max_tokens: 300, // 足够容纳20个公司名称的额度
      temperature: 0.7
    })
  })
  .then(response => {
    if (!response.ok) {
      return response.json().then(err => { throw new Error(err.error.message) });
    }
    return response.json();
  })
  .then(data => {
    const companiesText = data.choices[0].message.content;
    // 将文本按行拆分，过滤空行后生成列表项
    const companiesArray = companiesText.split('\n').filter(item => item.trim() !== '');
    companiesOutput.innerHTML = companiesArray.map(company => `<li>${company.trim()}</li>`).join('');
  })
  .catch(error => {
    console.error(error);
    companiesOutput.innerHTML = `<li>生成失败：${error.message}</li>`;
  });
};

form.addEventListener('submit', generateCampaign);

关键修复点说明 #

• 替换API端点：改用v1/chat/completions接口，搭配gpt-3.5-turbo模型，这是OpenAI当前支持的主流交互方式。
• 优化Prompt引导：通过system角色明确要求AI输出格式（每行一个公司），避免生成无关内容。
• 调整Token额度：将max_tokens提升至300，确保能容纳20个公司名称的输出。
• 结构化处理输出：将AI返回的文本按行拆分，过滤空行后生成独立的<li>元素，保证列表展示正常。
• 完善错误处理：新增HTTP状态码校验，捕获API返回的业务错误并展示给用户。

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