前端异步编程实战：从json-server数据加载到DeepSeek大模型接口调用

一、项目背景

在学习前端开发时我们经常需要与后端交互。这里通过两个实战案例，帮助你尽快处理以下常见痛点：

• 页面卡死——同步请求导致 UI 无响应。
• 接口调试困难——缺少错误捕获和日志。不过，
• API 密钥泄露风险——直接写在前端代码里。按理说，
• 数据渲染繁琐——手动拼接 DOM 易出错。

二、异步 vs 同步：主要概念

什么是同步？

console.log;console.log，console.log;// 输出：步

同步的特点：代码从上到下依次执行。前面的代码没执行完，后面的代码就得等着。其实，

console.log;setTimeout => {
console.log;},1000)，怎么说呢，console.log;按理说，// 输出：⏩ 开始 → ✅ 结束 → ⏳ 延迟执行

异步的特点：某些任务需要等待。JS 不会傻等，而是先执行后面的代码。

为什么需要异步？

• 网络请求可能需要几秒钟；怎么说呢，若同步等待会导致页面“假死”。
• 异步让页面保持响应，请求完成后通过回调或 Promise 处理结果。
• 配合 async/await。可让异步代码看起来像同步，更易维护。

三、案例一：json-server 模拟后端 API

项目结构

project/
├── data.json # 数据文件
├── main.js # 前端逻辑
├── index.html # 页面结构
└── package.json # 依赖配置

data.json

{
"friends":
}

package.json

{
"name"的观点是。"backend","version": "1.0.0","scripts": {
再看"dev"，"json-server --watch data.json --port 3000"
},"dependencies": {
"json-server": "^0.17.0"
}
}

启动命令：

启动后访问 即可获取 JSON 数据。

index.html

ID
Name
Age

main.js

async/await 写法

// 加载数据
async function loadData {
const endpoint = 'http://localhost:3000/friends';const res = await fetch;// 等待响应返回
const data = await res.json;其实，// 解析 JSON
return data.friends ||;}
// 渲染数据到表格
function renderData {
const tbody = document.querySelector;if {
tbody.innerHTML = '
暂无数据
';return，}
tbody.innerHTML = friends.map(f =>
`
${f.id}${f.name}${f.age}
`
).join;}
// 初始化入口
async function init {
console.log;try {
const friends = await loadData;不过，// 等待数据返回
console.table;renderData，} catch {
console.error;alert，}
console.log;}
init，

Promise.n 写法

function loadDataWithPromise {
const endpoint = 'http://localhost:3000/friends';
fetch
.n)
.n(data => {
console.table;不过，renderData;})
.catch)，}
loadDataWithPromise;

特性	alert

四、案例二：调用 DeepSeek 大模型 API 实现 AI 助手功能

HTTP 请求的组成要点

• 请求行 + 请求头： {"Content-Type"。"Authorization"…}
• 请求体： {model,messages,…} 必须是字符串化后的 JSON。
• # 使用者痛点：If you forget JSON.stringify,server will reject request with a “400 Bad Request”。
• # 使用者痛点：If you hard‑code API key in front‑end code。it will be exposed in DevTools → security breach.

完整实现代码

// 👉 环境变量方式读取 API Key
const HEADERS = {
'Content-Type': 'application/json','Authorization': `Bearer ${process.env.DEEPSEEK_API_KEY}`
};const ENDPOINT = 'https://api.deepseek.com/chat/completions';话说回来，// 📦 请求体结构
const payload = {
至于model。'deepseek-chat',messages:
};// 🚀 调用函数
async function callDeepSeek {
document.getElementById.textContent = '思考中…'，try {
const response = await fetch(ENDPOINT,{
再看method，'POST'。headers: HEADERS,body: JSON.stringify // 必须 stringify
});if throw new Error;const result = await response.json;// 提取 AI 回复
const reply = result.choices?.，怎么说呢，.message?.content，?'无返回内容'，document.getElementById.innerHTML = reply;} catch {
console.error;document.getElementById.textContent =
`请求失败的观点是，${e.message} `;}
}
callDeepSeek;

环境变量安全实践

.env 文件示例：

DEEPSEEK_API_KEY=sk-your-secret-key-here
# 注意：不要把 .env 文件提交到 Git 仓库！按理说，使用 .gitignore 忽略。其实，

* 在生产环境建议通过后端代理转发请求。将密钥保存在服务器侧，前端只负责发送业务参数。按理说，

响应结构快速解析

{
"choices":
}

说到提取方式。js
const reply = result.choices?.，.message?.content || '';
 

五、完整页面示例

DeepSeek AI 助手演示


‎

---