前端开发者也能玩转大模型：使用HTTP请求调用DeepSeek全记录

无需后端支持，纯前端技术栈也能集成人工智能大模型

作为一名前端开发者，我最近探索了一个有趣的技术方案：如何在前端项目中直接调用大型语言模型。在这个过程中，我发现了不少值得分享的经验和技巧，今天就带大家一步步实现前端调用DeepSeek大模型的全过程。

项目背景与初衷

传统上，调用AI大模型通常需要后端服务的支持，前端通过API与自己的服务器交互，再由服务器调用AI服务。这样做主要是出于安全考虑，特别是为了保护API密钥。但有时候，我们只是想快速原型验证，或者构建简单的个人项目，这时候如果能直接从前端调用大模型，会大大简化开发流程。

我决定尝试使用纯前端技术栈调用DeepSeek大模型，并记录下整个过程。

项目初始化：从零搭建

为了简化开发流程，我使用了 Trae（一种 AI 辅助开发工具）帮我快速初始化了一个基于 Vite 的前端项目。V

选择构建工具

我选择了Vite作为项目构建工具，它不仅速度快，而且内置了丰富的功能，特别是对环境变量的支持，这对保护API密钥至关重要。

bash 复制代码

npm create vite@latest frontend-llm-demo
cd frontend-llm-demo
npm install

项目结构设计

保持简洁的项目结构：

lua 复制代码

frontend-llm-demo/
├── index.html
├── styles/
│   └── style.css
├── scripts/
│   └── app.js
└── .env.local

其中，index.html 是主页面，app.js 负责发起 API 请求，而 .env.local 将用于存放敏感的 API Key。

核心实现：HTTP请求调用LLM

构建API请求

在app.js中，我实现了完整的API调用逻辑：

javascript 复制代码

// DeepSeek API端点
const endpoint = 'https://api.deepseek.com/chat/completions'

// 设置请求头
const headers = {
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`
}

// 构建请求体
const payload = {
  model: 'deepseek-chat',
  messages: [
    {
      role: 'system',
      content: 'You are a helpful assistant.'
    },
    {
      role: 'user',
      content: '你好 DeepSeek'
    }
  ]
}

// 发送请求并处理响应
const response = await fetch(endpoint, {
  method: 'POST',
  headers: headers,
  body: JSON.stringify(payload)
})

const data = await response.json()
console.log(data)

// 将模型回复动态挂载到页面
document.getElementById('reply').textContent = data.choices[0].message.content

关键技术点解析

1. 请求方法选择

我使用了POST而非GET方法，原因有二：

POST请求更安全，参数不会暴露在URL中
我们需要传递请求体，GET请求通常不包含请求体而 LLM 调用需要传递复杂的 messages 结构，必须使用 POST

2. 请求头设置

请求头包含了两个关键信息：

Content-Type: application/json - 告诉服务器我们发送的是JSON格式数据
Authorization: Bearer ... - 用于身份验证的API密钥

3. 请求体构建

请求体是一个JSON对象，包含：

model - 指定要使用的模型版本
messages - 对话消息数组，包含角色和内容

4. 数据序列化

使用JSON.stringify()将JavaScript对象转换为JSON字符串，因为HTTP协议只能传输文本或二进制数据，不能直接传输对象。

安全考虑：保护API密钥

环境变量的重要性

直接将API密钥硬编码在前端代码中是极其危险的，任何用户都可以查看源代码获取密钥。为了解决这个问题，我使用了环境变量。

Vite环境变量配置

Vite使用特殊的import.meta.env对象来访问环境变量。以VITE_开头的变量会被嵌入到客户端代码中。

创建.env文件：

ini 复制代码

VITE_DEEPSEEK_API_KEY=your_api_key_here

在代码中访问：

javascript 复制代码

const apiKey = import.meta.env.VITE_DEEPSEEK_API_KEY

注意：即使使用环境变量，前端代码中的API密钥仍然可能被有心人获取。对于生产环境，最佳实践仍然是使用后端服务作为代理。

异步处理：从Promise到async/await

传统的Promise链式调用

javascript 复制代码

fetch(endpoint, options)
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 错误处理
  })

现代的async/await

我选择了async/await语法，因为它更简洁、更易读：

javascript 复制代码

try {
  const response = await fetch(endpoint, options)
  const data = await response.json()
  // 处理数据
} catch (error) {
  // 错误处理
}

结果展示：动态更新DOM

获取到API响应后，需要将结果显示在页面上：

javascript 复制代码

document.getElementById('reply').textContent = data.choices[0].message.content

这里使用了直接操作DOM的方式，在现代前端框架流行的今天，这种原生方法依然简单有效。

完整HTML结构

html 复制代码

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <title>前端调用大模型示例</title>
  <link rel="stylesheet" href="styles/style.css">
</head>
<body>
  <h1>Hello DeepSeek</h1>
  <div id="reply"></div>
  <script type="module" src="./scripts/app.js"></script>
</body>
</html>

开发心得与总结

通过这个项目，我获得了以下几点经验：

1. 前端调用LLM的可行性

事实证明，前端直接调用大模型API是完全可行的，这为快速原型开发和个人项目提供了便利。但需要注意安全性问题，不建议在生产环境中直接暴露API密钥。

2. HTTP请求的细节重要性

调用外部API时，请求的每个部分都很重要：

正确的端点URL
恰当的HTTP方法
必要的请求头
正确格式化的请求体

3. 现代JavaScript特性的价值

ES6+的特性让代码更加简洁：

模板字符串
箭头函数
解构赋值
async/await

4. 构建工具的重要性

Vite等现代构建工具不仅提供开发服务器和打包功能，还解决了环境变量、模块化等工程化问题。

5. 安全意识的培养

即使是在个人项目中，也应该养成良好的安全习惯，使用环境变量管理敏感信息。

结语

前端技术日新月异，如今我们甚至可以直接在前端调用强大的人工智能模型。这个项目虽然简单，但展示了前端开发的强大能力和无限可能性。作为前端开发者，我们不应该将自己局限在传统的界面开发中，而应该积极探索前端技术的边界。

希望这篇文章能为想要在前端项目中集成AI能力的开发者提供一些参考和启发。前端的世界很精彩，让我们一起探索更多可能性！

注意：本文示例仅适用于开发和测试环境，生产环境中请务必通过后端服务调用第三方API，确保API密钥的安全性。