在JavaScript中调用OpenAI API的详细步骤

 更新时间:2025年04月01日 09:51:24   作者:匹马夕阳  
在 JavaScript 中调用 OpenAI API 也非常简单,下面我将结合具体代码示例以及使用场景,详细讲解如何使用 JavaScript 调用 OpenAI API,需要的朋友可以参考下

1. 安装 OpenAI 官方库(可选)

如果你使用 Node.js 环境,可以通过 npm 或 yarn 安装 OpenAI 的官方 SDK。这样你可以更方便地与 API 进行交互。

npm install openai

如果你在浏览器环境中使用 fetch 来调用 API,则不需要安装任何库。

2. 准备 API Key

和 Python 一样,你需要在 OpenAI 账户 中获取 API Key,并将其用于请求中。

3. 使用 JavaScript 调用 OpenAI API

基本示例:使用 fetch 调用 ChatGPT API

代码示例(浏览器环境):

// 获取 OpenAI API Key(请确保此密钥安全)
const apiKey = 'your_openai_api_key';

// 请求的 API URL
const url = 'https://api.openai.com/v1/chat/completions';

// 定义请求体
const requestBody = {
  model: "gpt-3.5-turbo",  // 可以是 gpt-4 或其他模型
  messages: [
    { role: "system", content: "你是一个乐于助人的AI助手。" },
    { role: "user", content: "帮我写一个Python计算两个数之和的函数。" }
  ],
  temperature: 0.7,  // 控制生成内容的随机性,范围 0-1
  max_tokens: 150,   // 控制生成内容的最大长度
};

// 发送请求到 OpenAI API
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`,
  },
  body: JSON.stringify(requestBody),
})
  .then(response => response.json())
  .then(data => {
    console.log(data.choices[0].message.content);  // 输出生成的内容
  })
  .catch(error => {
    console.error('Error:', error);
  });

运行结果:

def add_numbers(a, b):
    return a + b

4. 高级使用场景:

场景 1:生成文本(例如文章、博客等)

代码示例:

const generateContent = async (userInput) => {
  const apiKey = 'your_openai_api_key';
  const url = 'https://api.openai.com/v1/chat/completions';
  
  const requestBody = {
    model: "gpt-4",  // 选择合适的模型
    messages: [
      { role: "system", content: "你是一名专业的文案编辑。" },
      { role: "user", content: userInput }
    ],
    temperature: 0.6,
    max_tokens: 200,
  };

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`,
      },
      body: JSON.stringify(requestBody),
    });

    const data = await response.json();
    console.log(data.choices[0].message.content);  // 输出生成的文案
  } catch (error) {
    console.error('Error:', error);
  }
};

// 用户输入
generateContent("帮我写一段关于AI教育工具的产品介绍。");

场景 2:创建问答机器人

代码示例:

const chatbotResponse = async (userInput) => {
  const apiKey = 'your_openai_api_key';
  const url = 'https://api.openai.com/v1/chat/completions';
  
  const requestBody = {
    model: "gpt-3.5-turbo",  // 使用 ChatGPT 模型
    messages: [
      { role: "system", content: "你是一个智能问答机器人,可以回答各种问题。" },
      { role: "user", content: userInput }
    ],
    temperature: 0.7,
    max_tokens: 150,
  };

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`,
      },
      body: JSON.stringify(requestBody),
    });

    const data = await response.json();
    return data.choices[0].message.content;  // 返回生成的回复
  } catch (error) {
    console.error('Error:', error);
    return "发生错误,请稍后再试。";
  }
};

// 用户输入
const userQuery = "如何用Python读取JSON文件?";
chatbotResponse(userQuery).then(response => {
  console.log(response);  // 输出问答机器人回复
});

场景 3:批量处理多个请求

代码示例:

const batchProcess = async (texts) => {
  const apiKey = 'your_openai_api_key';
  const url = 'https://api.openai.com/v1/chat/completions';

  const responses = [];
  for (const text of texts) {
    const requestBody = {
      model: "gpt-3.5-turbo",
      messages: [
        { role: "user", content: text }
      ],
      temperature: 0.6,
      max_tokens: 100,
    };

    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${apiKey}`,
        },
        body: JSON.stringify(requestBody),
      });

      const data = await response.json();
      responses.push(data.choices[0].message.content);
    } catch (error) {
      console.error('Error:', error);
      responses.push('错误:无法生成回复');
    }
  }

  return responses;
};

// 批量处理文本
const texts = [
  "帮我总结这段话的重点:Python是一种非常流行的编程语言。",
  "帮我翻译这句话:Hello, how are you?",
  "生成一句关于人工智能未来发展的预测。"
];

batchProcess(texts).then(responses => {
  console.log(responses.join('\n'));
});

5. 运行时优化和注意事项:

  1. API 限制和错误处理:

    • 在高频请求的情况下,确保处理 429 Too Many Requests 错误。
    • 可以实现重试机制,例如在遇到限流错误时延时一段时间后再发起请求。
  2. API Key 安全:

    • 切勿在前端代码中暴露 API Key,尤其是公开的前端应用。
    • 推荐使用环境变量或服务器代理来隐藏 API Key。
  3. 费用控制:

    • OpenAI 的 API 按照生成的 tokens(字符数量)进行计费。根据 max_tokens 来控制生成的文本长度,避免产生不必要的费用。
  4. API 调用频率:

    • 如果在短时间内发送大量请求,可以通过添加适当的 delay 或 debounce 来避免频繁调用。

通过以上示例,你可以在 JavaScript 环境中灵活调用 OpenAI API 来完成多种任务

到此这篇关于在JavaScript中调用OpenAI API的详细步骤的文章就介绍到这了,更多相关JavaScript调用OpenAI API内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS中微信小程序自定义底部弹出框

    JS中微信小程序自定义底部弹出框

    本文通过实例代码给大家介绍了js开发中微信小程序自定义底部弹出框效果,非常不错,具有参考借鉴价值,需要的朋友参考下
    2016-12-12
  • jquery结合CSS使用validate实现漂亮的验证

    jquery结合CSS使用validate实现漂亮的验证

    这篇文章主要介绍了jquery结合CSS使用validate实现漂亮的验证,需要的朋友可以参考下
    2015-01-01
  • {}与function(){}选用空对象{}来存放keyValue

    {}与function(){}选用空对象{}来存放keyValue

    虽说js里面什么都能当对象,也能用填鸭式方法任意给对象添加属性,属性赋值.但是有些js内置的对象,类型属性也是没办法覆盖的
    2012-05-05
  • js中Number数字数值运算后值不对的解决方法

    js中Number数字数值运算后值不对的解决方法

    下面小编就为大家带来一篇js中Number数字数值运算后值不对的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS前端解压zip的方法和技巧分享

    JS前端解压zip的方法和技巧分享

    这篇文章主要介绍了JS前端解压zip的方法和技巧,业务中有时候需要获取某个 zip 压缩包内的文件内容展示到前端,在 zip 包体积不是那么大的时候并且不涉及压缩包解密的时候,可以考虑纯前端方案,需要的朋友可以参考下
    2024-03-03
  • 详解javascript获取url信息的常见方法

    详解javascript获取url信息的常见方法

    本篇文章主要对javascript获取url信息的常见方法进行介绍,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JS数组Reduce方法功能与用法实例详解

    JS数组Reduce方法功能与用法实例详解

    这篇文章主要介绍了JS数组Reduce方法功能与用法,结合实例形式详细分析了JS数组Reduce方法操作数组统计、去重等相关操作技巧,需要的朋友可以参考下
    2020-04-04
  • setInterval 不准的原因及问题解决方案

    setInterval 不准的原因及问题解决方案

    setInterval 是 JavaScript 中用于定时执行任务的常用方法,本文主要介绍了setInterval 不准的原因及问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-02-02
  • 详解webpack4升级指南以及从webpack3.x迁移

    详解webpack4升级指南以及从webpack3.x迁移

    本篇文章主要介绍了详解webpack4升级指南以及从webpack3.x迁移,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 将字符串转换成gb2312或者utf-8编码的参数(js版)

    将字符串转换成gb2312或者utf-8编码的参数(js版)

    直接在url中传递中文参数时,读到的中文都是乱码,那么我们应该怎么将这些参数转换呢,接下来与大家分享下将字符串转换成utf-8或者gb2312编码的参数的技巧
    2013-04-04

最新评论