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

前言

如今，在 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 错误。
加载动画 ：
- 如有需求，可在请求期间显示加载动画，提升用户体验。