快捷導(dǎo)航

在JavaScript中調(diào)用OpenAI?API的詳細(xì)步驟

更新時間：2025年04月01日 09:51:24 作者：匹馬夕陽

在?JavaScript?中調(diào)用?OpenAI?API?也非常簡單,下面我將結(jié)合具體代碼示例以及使用場景,詳細(xì)講解如何使用?JavaScript?調(diào)用?OpenAI?API,需要的朋友可以參考下

1. 安裝 OpenAI 官方庫（可選）

如果你使用 Node.js 環(huán)境，可以通過 npm 或 yarn 安裝 OpenAI 的官方 SDK。這樣你可以更方便地與 API 進(jìn)行交互。

npm install openai

如果你在瀏覽器環(huán)境中使用 fetch 來調(diào)用 API，則不需要安裝任何庫。

2. 準(zhǔn)備 API Key

和 Python 一樣，你需要在 OpenAI 賬戶中獲取 API Key，并將其用于請求中。

3. 使用 JavaScript 調(diào)用 OpenAI API

基本示例：使用 fetch 調(diào)用 ChatGPT API

代碼示例（瀏覽器環(huán)境）：

// 獲取 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計(jì)算兩個數(shù)之和的函數(shù)。" }
  ],
  temperature: 0.7,  // 控制生成內(nèi)容的隨機(jī)性，范圍 0-1
  max_tokens: 150,   // 控制生成內(nèi)容的最大長度
};

// 發(fā)送請求到 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);  // 輸出生成的內(nèi)容
  })
  .catch(error => {
    console.error('Error:', error);
  });

運(yùn)行結(jié)果：

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: "你是一名專業(yè)的文案編輯。" },
      { 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("幫我寫一段關(guān)于AI教育工具的產(chǎn)品介紹。");

場景 2：創(chuàng)建問答機(jī)器人

代碼示例：

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: "你是一個智能問答機(jī)器人，可以回答各種問題。" },
      { 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;  // 返回生成的回復(fù)
  } catch (error) {
    console.error('Error:', error);
    return "發(fā)生錯誤，請稍后再試。";
  }
};

// 用戶輸入
const userQuery = "如何用Python讀取JSON文件？";
chatbotResponse(userQuery).then(response => {
  console.log(response);  // 輸出問答機(jī)器人回復(fù)
});

場景 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('錯誤：無法生成回復(fù)');
    }
  }

  return responses;
};

// 批量處理文本
const texts = [
  "幫我總結(jié)這段話的重點(diǎn)：Python是一種非常流行的編程語言。",
  "幫我翻譯這句話：Hello, how are you?",
  "生成一句關(guān)于人工智能未來發(fā)展的預(yù)測。"
];

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

5. 運(yùn)行時優(yōu)化和注意事項(xiàng)：

API 限制和錯誤處理：
- 在高頻請求的情況下，確保處理 429 Too Many Requests 錯誤。
- 可以實(shí)現(xiàn)重試機(jī)制，例如在遇到限流錯誤時延時一段時間后再發(fā)起請求。
API Key 安全：
- 切勿在前端代碼中暴露 API Key，尤其是公開的前端應(yīng)用。
- 推薦使用環(huán)境變量或服務(wù)器代理來隱藏 API Key。
費(fèi)用控制：
- OpenAI 的 API 按照生成的 tokens（字符數(shù)量）進(jìn)行計(jì)費(fèi)。根據(jù) max_tokens 來控制生成的文本長度，避免產(chǎn)生不必要的費(fèi)用。
API 調(diào)用頻率：
- 如果在短時間內(nèi)發(fā)送大量請求，可以通過添加適當(dāng)?shù)?nbsp;delay 或 debounce 來避免頻繁調(diào)用。

通過以上示例，你可以在 JavaScript 環(huán)境中靈活調(diào)用 OpenAI API 來完成多種任務(wù)

到此這篇關(guān)于在JavaScript中調(diào)用OpenAI API的詳細(xì)步驟的文章就介紹到這了,更多相關(guān)JavaScript調(diào)用OpenAI API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: