DeepSeek ：小白也能实现的接口调用如今，在 Web 开发中，传统的前后端分离模式已经开始无法满足时代的需求，AI

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

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

一. 项目结构

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

index.html: 页面结构。
styles.css: 样式定义。（为了防止篇幅过长，且该文件对于文章重点内容无影响，故省略）
script.js: 调用 DeepSeek API 的逻辑代码。

二. DeepSeek 接口调用流程

调用 DeepSeek 接口，首先你得拥有 Deepseek 接口密钥，获取密钥的步骤如下：

步骤1. 访问Deepseek官网 www.deepseek.com/

步骤2. 点击右上角的 API开放平台

步骤3. 在左侧菜单栏找到API keys，然后创建API key，名称随便起，然后记得复制你的Key。

三. 代码与分析

3.1 index.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"将其作为 JavaScript 动态插入内容的“挂载点”。
然后通过 <script/>标签，引入外部的 script.js文件，用于添加交互功能，比如实现与Deepseek接口的交互。

3.2 script.js

该文件主要实现对Deepseek接口的调用功能。

// 设置请求地址
const endpoint = "https://api.deepseek.com/chat/completions";

// 配置请求头
const headers = {
  "Content-Type": "application/json",
  "Authorization": "Bearer 你自己的API Key"
};

// 构造请求体
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.2.1. 设置请求地址（Endpoint）

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

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

3.2.2. 配置请求头（Headers）

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.2.3. 构造请求体

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

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

3.2.4. 发送 HTTP 请求

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

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

3.2.5. 处理返回结果

.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")...：将结果插入到index.html的 <div id="reply"> 挂载点上。

效果展示：

四. 安全注意事项

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