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

本文介绍了如何通过火山引擎API调用豆包大模型实现AI对话功能。首先需要在火山引擎平台创建自定义推理接入点并获取API Key。作者提供了两种实现方式：1）jQuery的普通请求方式（需关闭流式传输）；2）推荐使用Fetch API实现流式传输，能够逐字输出AI回复内容。文中包含完整的HTML代码示例，展示了如何设置请求参数、处理流式响应数据并实时渲染到页面。注意代码中虽然公开了测试用的API K

小旋风01234

738人浏览 · 2025-08-07 10:25:45

小旋风01234 · 2025-08-07 10:25:45 发布

兄弟们，你们调太多了，我下面这个key超额度欠费了，你们自己申请替换我的key再试吧

前期准备

先在火山引擎那创建一个自定义推理接入点，地址：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>