DeepSeek 接口调用：从 HTTP 请求到智能交互

如今，在 Web 开发中，传统的前后端分离模式已经无法满足 AI 时代的需求，通过调用大模型（如 DeepSeek）的 API，前端可以直接与智能服务交互，实现动态内容生成、对话交互等能力。API 调用 DeepSeek 接口，并结合代码详解每一步的逻辑。项目为例，展示如何通过 JavaScript 的。

马士兵

628人浏览 · 2025-06-08 15:40:43

马士兵 · 2025-06-08 15:40:43 发布

前言

如今，在 Web 开发中，传统的前后端分离模式已经无法满足 AI 时代的需求，通过调用大模型（如 DeepSeek）的 API，前端可以直接与智能服务交互，实现动态内容生成、对话交互等能力。

本文将以 WebLLM 项目为例，展示如何通过 JavaScript 的 fetch API 调用 DeepSeek 接口，并结合代码详解每一步的逻辑。

一. 项目结构

WebLLM 项目是一个基于 HTML、CSS 和 JavaScript 的静态网站，核心文件包括：

index.html: 页面结构。
styles.css: 样式定义。
script.js: 调用 DeepSeek API 的逻辑代码。

二. DeepSeek 接口调用流程

调用 DeepSeek 接口的核心步骤如下：

设置请求地址（Endpoint）
配置请求头（Headers）
构造请求体（Payload）
发送 HTTP POST 请求
处理返回结果

三. 代码详解

3.1 HTML 结构

html

代码解读

复制代码

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>WebLLM</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <h1>Hello Deepseek</h1>  <div id="reply"></div> <script src="script.js"></script> </body> </html>

关键点：
- <div id="reply"> 是用于显示 DeepSeek 返回结果的容器。
- <script src="script.js"> 引入 JavaScript 逻辑文件。

3.2 用JavaScript 调用 DeepSeek 接口

javascript

代码解读

复制代码

// 设置请求地址 const endpoint = "https://api.deepseek.com/chat/completions"; // 配置请求头 const headers = { "Content-Type": "application/json", "Authorization": "Bearer sk-aa661822bf1b442ba5e9e2dd201da865" }; // 构造请求体 const payload = { model: "deepseek-chat", messages: [ { role: "system", content: "你是一个天马行空的小助手" }, { role: "user", content: "讲一个谐音梗冷笑话" } ] }; // 发送 POST 请求 fetch(endpoint, { method: "POST", headers: headers, body: JSON.stringify(payload) }) .then(res => res.json()) // 解析返回的 JSON 数据 .then(data => { console.log(data); // 打印返回结果 document.querySelector("#reply").innerHTML += data.choices[0].message.content; // 将结果插入页面 });

3.3 代码逐行解析

3.3.1. 请求地址（Endpoint）

javascript

代码解读

复制代码

const endpoint = "https://api.deepseek.com/chat/completions";

作用：指定 DeepSeek 的 API 地址。
说明：
- chat/completions 是 DeepSeek 提供的对话接口。
- 该地址是 HTTPS 协议，需通过 POST 方法发送请求。

3.3.2. 请求头（Headers）

javascript

代码解读

复制代码

const headers = { "Content-Type": "application/json", "Authorization": "Bearer sk-1234567890" };

作用：设置 HTTP 请求的头部信息。
关键字段：
- "Content-Type": "application/json"：声明请求体格式为 JSON。
- "Authorization": "Bearer <API_KEY>"：通过 API Key 认证身份（需把sk-1234567890替换为你自己的密钥）。

3.3.3. 请求体（Payload）

javascript

代码解读

复制代码

const payload = { model: "deepseek-chat", messages: [ { role: "system", content: "你是一个脑洞大开的小助手" }, { role: "user", content: "讲一个谐音梗冷笑话" } ] };

作用：定义发送给 DeepSeek 的对话内容。
关键字段：
- model: 指定使用的模型（如作者使用的是 deepseek-chat）。
- messages: 对话历史记录，包含以下角色：
  - system: 系统指令（初始化模型行为）。
  - user: 用户输入。
  - assistant: 模型回复（此处未显示，由 DeepSeek 生成）。

3.3.4. 发送 HTTP 请求

javascript

代码解读

复制代码

fetch(endpoint, { method: "POST", headers: headers, body: JSON.stringify(payload) })

作用：向 DeepSeek 发送 POST 请求。
关键参数：
- method: "POST"：指定请求方法为POST。
- headers：传递认证和内容类型信息。
- body: JSON.stringify(payload)：将请求体转换为 JSON 字符串。

3.3.5. 处理返回结果

javascript

代码解读

复制代码

.then(res => res.json()) // 解析 JSON 数据 .then(data => { console.log(data); // 打印返回结果 document.querySelector("#reply").innerHTML += data.choices[0].message.content; // 将结果插入页面 });

作用：接收 DeepSeek 的响应并更新页面。
关键步骤：
1. res.json()：将响应体解析为 JSON 格式。
2. data.choices[0].message.content：提取模型生成的回复内容。
3. document.querySelector("#reply")...：将结果插入到页面的 <div id="reply"> 容器中。

四. 安全注意事项

API Key 管理：
- 本文中的 API Key 示例（sk-1234567890），需替换为你的真实密钥。
- 切勿将密钥直接暴露在客户端代码中，建议通过后端代理调用 API。
HTTPS 协议：
- DeepSeek 接口仅支持 HTTPS，确保请求地址正确。

五. 扩展与优化

添加用户输入功能：
- 通过 <input> 或 <textarea> 获取用户输入，并动态更新 messages。
错误处理：
- 添加 .catch(error => console.error(error)) 可用于捕获网络或 API 错误。
加载动画：
- 如有需求，可在请求期间显示加载动画，提升用户体验。

DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

Kubernetes 上的大数据（三）

在本章中，你学习了如何在 Kubernetes 上部署和管理 Apache Spark、Apache Airflow 和 Apache Kafka 等关键大数据技术。将这些工具部署到 Kubernetes 上提供了多个好处，包括简化操作、更好的资源利用、扩展性、高可用性和统一的集群管理。你首先在 Kubernetes 上部署了 Spark 操作符，并运行了一个 Spark 应用程序来处理来自 Am