当前位置：首页 > news >正文

火山引擎接入豆包AI（纯前端调用api的方式）

news 2025/8/8 10:16:27

前期准备

先在火山引擎那创建一个自定义推理接入点，地址：https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint?config=%7B%7D

在这里插入图片描述

再点击右边操作的 api接入，复制粘贴自己的API Key

在这里插入图片描述

效果

然后就可以去调用接口了
可以用jq模拟的方式，但是不推荐这种方式，因为要等完整的回答太慢了
建议开启流式传输，用Fetch API 实现逐字输出
我的API Key虽然贴出来了，方便大家测试，但是不建议大家直接用我的

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>火山引擎豆包Dome</title></head><body><div id="chat-box"></div></body><script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script><script>// 官网的例子// curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \//   -H "Content-Type: application/json" \//   -H "Authorization: Bearer $ARK_API_KEY" \//   -d '{//     "model": "doubao-1-5-pro-32k-250115",//     "messages": [//       {"role": "system","content": "你是人工智能助手."},//       {"role": "user","content": "你好"}//     ]//   }'// 具体对话let data = {model: "doubao-1-5-pro-32k-250115",stream: true, // 流式传输messages: [{ role: "system", content: "你是人工智能助手." },{ role: "user", content: "你好，我是前端开发，请问我怎么找工作？" },],};// 1.jquery的调用方式，不行，必须关闭流式传输，最多只能等接口全部加载成功后通过计时器模拟，不能逐字输出// let fullResponse = "";// let charIndex = 0;// $.ajax({//   type: "post",//   url: "https://ark.cn-beijing.volces.com/api/v3/chat/completions",//   dataType: "json",//   contentType: "application/json", // 明确指定内容类型//   headers: {//     Authorization: "Bearer b3025ba7-2241-4794-b983-5089b0719ea6",//   },//   data: JSON.stringify(data),//   success: (res) => {//     console.log(res);//     const text = res.choices[0].message.content;//     const timer = setInterval(() => {//       if (charIndex < text.length) {//         fullResponse += text.charAt(charIndex);//         $("#chat-box").text(fullResponse);//         charIndex++;//       } else {//         clearInterval(timer);//       }//     }, 50); // 每50毫秒输出一个字//   },// });// 2.Fetch API 实现逐字输出const chatBox = document.getElementById("chat-box");let fullMessage = "";async function streamChat() {const response = await fetch("https://ark.cn-beijing.volces.com/api/v3/chat/completions",{method: "POST",headers: {"Content-Type": "application/json",Authorization: "Bearer b3025ba7-2241-4794-b983-5089b0719ea6",},body: JSON.stringify(data),});const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {const { done, value } = await reader.read();if (done) {document.querySelector(".typing-cursor")?.remove();break;}const chunk = decoder.decode(value);chunk.split("\n").forEach((line) => {if (line.startsWith("data: ")) {try {const data = JSON.parse(line.slice(6));if (data.choices?.[0]?.delta?.content) {fullMessage += data.choices[0].delta.content;renderMessage(fullMessage);}} catch (e) {}}});}}function renderMessage(text) {chatBox.innerHTML = `<div class="message">${text}</div><span class="typing-cursor"></span>`;chatBox.scrollTop = chatBox.scrollHeight;}streamChat();</script>
</html>