前端开发的演进之路
Web 1.0 时代
在早期的 Web 1.0 时代，前端开发相对简单：
- 用户输入 URL 或点击链接（体验较为死板）
- 向服务端发送请求
- 服务器（node/java）处理请求，查询数据库，生成 HTML 字符串
- 返回整个 HTML 页面给浏览器
- HTML/CSS/JS 职责单一，服务器端返回的 JS 只做简单交互
Web 2.0 时代
随着技术发展，前端体验有了质的飞跃：
- JavaScript 开始主动请求后端服务器
- 实现了更丰富的交互体验：
- 滚动加载更多数据，提供富应用体验
- 不需要刷新页面，通过 fetch 获取新数据，DOM 直接更新
- 社交功能（如点赞）通过 JS fetch API 实现
// Web 2.0 示例：无需刷新页面获取数据
fetch('https://api.github.com/users/pose203/repos')
.then(res => res.json())
.then(data => {
document.querySelector('#reply').innerHTML += data.map(repo => `
<ul><li>${repo.name}</li></ul>`).join('')
})
Fetch：前端请求的革命
Fetch API 的特点与应用
Fetch API 是现代前端开发中不可或缺的工具，它彻底改变了前端与服务端的交互方式：
-
无刷新数据获取
- 滚动到底部后，加载更多数据，提供 Web 2.0 富应用体验
- 用户可以持续看到新的内容，无需等待整页刷新
-
简洁而强大的语法
- 基于 Promise，支持链式调用
- 不需要刷新页面，主动去服务端取数据，直接通过 DOM 更新页面
-
社交功能实现
- 点赞等功能通过 js fetch api 实现
- 用户操作即时反馈，无需等待页面重载
-
前端自主性
- 前端获得了主动请求数据的能力
- 可控制何时、如何获取数据并展示
Fetch 在 AI 时代的新角色
进入 LLM AI 时代后，fetch 的价值得到了进一步扩展：
- 作为连接前端与 AI 大模型的桥梁
- 通过 fetch 调用可以直接获取大模型的能力
- 使智能前端真正成为可能
WebLLM：AI 驱动的智能前端时代
大模型与前端的融合
- 大模型在哪？
- 远程部署
- 通过 HTTP API 请求访问
- LLM 服务的特点
- API 调用方式统一
- fetch 赋予了 JS 连接 AI 能力的新生命
WebLLM 的核心价值
智能前端的新战场就是如何将 DeepSeek 等大模型能力无缝引入前端应用，让 AI 能力直接服务于用户界面。
HTTP 请求的构成
与大模型交互的 HTTP 请求主要包含：
-
请求行：定义请求方法和 URL
GET http://www.baidu.com POST https://api.deepseek.com/chat/completions -
请求头：包含元数据和认证信息
{ content-Type: application/json Authorization: Bearer 1234567890 凭证 } -
请求体 包含发送给大模型的具体内容和参数
实现 WebLLM：DeepSeek 集成实例
项目运行方式
直接在浏览器中打开 'index.html' 文件即可
完整代码实现
// 定义 API 端点
const endpoint = "https://api.deepseek.com/chat/completions"
// 设置请求头
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer sk-69e882216f0e46228a116ddfbd6f9d82`
}
// 构建请求体
const payload = {
model: 'deepseek-chat',
messages: [
// chat 三种角色
// 1. 系统角色 只会出现一次 设置系统的角色 开始会话之前
// 2. 用户角色
// 3. 助手角色
{ role: 'system', content: 'You are a helpful assistant.'},
{ role: 'user', content: '你好 Deepseek'}
]
}
// 发送请求并处理响应
fetch(endpoint, {
method: 'POST',
headers: headers,
// HTTP 请求传输只能是字符串或二进制
body: JSON.stringify(payload)
// 请求+LLM 生成需要花时间
// HTTP 是基于请求响应的简单协议
})
.then(res => res.json())
// 解析返回的 JSON 数据也要花时间
.then(data => {
console.log(data);
document.querySelector('#reply').innerHTML = data.choices[0].message.content
})
结语：前端的新未来
从 Web 1.0 到 Web 2.0，再到如今的 AI 智能前端时代，前端开发经历了巨大的变革。fetch 这个 API 不仅改变了我们与后端服务交互的方式，现在更成为连接前端与 AI 大模型的关键桥梁。
WebLLM 代表了前端开发的新方向 —— 通过简单的 API 调用，我们能将强大的人工智能能力直接引入网页应用，为用户提供更智能、更个性化的体验。智能前端的时代已经到来，大模型能力将成为前端开发的标配工具。
