LLM服务HTTP接口实战：前端HTTP请求全解与项目落地

一、前言在对接LLM大模型服务、后端业务接口开发中HTTP接口调用是前端必备核心能力。日常开发里主要分为两种调用方案基于OpenAI官方SDK封装调用、原生fetch发起网络请求同时前端原生还存在XMLHttpRequest老牌请求方案。本文围绕客户端-服务器架构、DNS与域名原理、本地Mock服务搭建、异步语法async/await、数据渲染全链路完整讲解配套可运行实战项目。二、前端发起HTTP请求的主流实现方案2.1 两大原生请求API前端浏览器环境原生提供两套发起HTTP请求的底层API是所有请求库axios、openai-sdk的底层实现基础XMLHttpRequestXHR早期JS异步请求标准AJAX技术底层依托该API实现兼容全量低版本浏览器Fetch APIES6推出新标准基于Promise设计语法更简洁现代浏览器原生支持也是对接LLM HTTP接口最常用原生方案。请求方案底层设计优点适用场景XMLHttpRequest回调设计兼容性极强IE可用老旧项目维护、兼容低版本设备fetchPromise异步语法语法精简、原生支持async/await新项目、对接LLM/后端REST接口2.2 开发对应的编程架构模式2.2.1 前后端分离架构本文所有代码基于前后端分离模式前端只负责页面渲染、交互逻辑后端Node/Java专注接口开发、数据处理通过约定的HTTP接口JSON格式完成数据交互也是目前对接OpenAI、各类LLM HTTP接口的主流架构。2.2.2 异步编程async/await语法fetch本身基于Promise异步设计async/await是ES2017推出的异步语法糖可以把异步代码书写成同步代码的结构解决多层Promise链式调用可读性差的问题是LLM接口请求、后端接口数据拉取的标准写法。核心作用await强制阻塞当前代码等待接口请求、数据解析完成后再向下执行渲染逻辑。2.3 客户端/服务端C/S与浏览器/服务端B/S架构B/SBrowser/Server 浏览器-服务器用户通过浏览器访问页面前端代码运行在浏览器本文HTMLJS项目属于该架构C/SClient/Server 客户端-服务器Android、IOS原生App作为客户端同样通过HTTP调用后端/LLM服务接口。不管B/S还是C/S客户端和服务端通信底层统一使用HTTP协议对接LLM接口无架构区分。三、Server服务基础原理3.1 服务器组成一台可提供接口服务的Server由两部分构成硬件物理服务器/云服务器软件后端运行环境常见Java、Node.js、Go等开发语言。3.2 IP地址 端口号示例地址http://127.0.0.1:3000IP地址网络中设备唯一标识用来在互联网/局域网精准定位目标服务器127.0.0.1是本机回环地址仅本地电脑可访问端口号一台服务器可开启多个服务端口用来区分同一机器上不同应用示例3000为自定义服务端口取值范围0~65535。3.3 域名与DNS解析IP由一串数字组成难以记忆因此出现域名如www.baidu.comDNS解析域名系统自动将易记的域名翻译为对应的IP地址浏览器才能通过IP找到目标服务器。对接线上LLM接口时填写域名URL即可底层自动完成DNS解析。3.4 API URLEndpoint接口终点Endpoint即接口请求终点是后端预先定义好的接口地址例如http://localhost:3000/friends、OpenAI大模型接口https://api.openai.com/v1/chat/completions。前端固定请求该地址后端收到请求后处理逻辑、返回JSON数据项目开发中所有接口地址统一配置管理方便后期环境切换测试/生产LLM地址。3.5 数据流转规则后端接口统一返回JSON格式数组/对象前端拿到数组后通过Array.map()遍历数组拼接HTML字符串最终插入表格DOM完成页面渲染也是本案例核心数据处理逻辑。map() 方法创建一个新数组这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成示例constarray1[1,4,9,16];constmap1array1.map((x)x*2);console.log(map1);// [2, 8, 18, 32]开发查阅建议原生Fetch、DOM操作细节优先参考MDN官方文档API参数、异常处理最全。四、本地Mock服务环境搭建json-server项目使用json-server快速搭建本地RESTful模拟服务无需编写后端代码一键生成接口用来模拟LLM/后端真实接口环境。注可以在终端中输入pnpm i json-server4.1 package.json配置文件新建项目初始化依赖配置执行npm init -y安装依赖npx json-server data.json启动3000端口服务。{name:backend,version:1.0.0,description:,main:index.js,scripts:{dev:json-server --watch data.json --port 3000},keywords:[],author:,license:ISC,type:commonjs,dependencies:{json-server:1.0.0-beta.15}}--watch data.json监听本地json文件文件数据改动自动更新接口返回值注这里data.json 是本地自己创建的名字取决于我们自己定义--port 3000指定服务运行在3000端口和前端请求地址保持一致。4.2 补充data.json模拟数据源同目录新建data.json接口http://localhost:3000/friends自动读取friends数据{friends:[{id:1,name:张三,age:22},{id:2,name:李四,age:24},{id:3,name:王五,age:21}]}五、前端页面业务JS完整实战代码5.1 HTML页面结构index.html搭建基础页面骨架包含表格容器JS动态向tbody插入数据代码可直接新建html文件使用。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title前端HTTP请求实战/title/headbodyheaderh1前端发送http 请求渲染表格/h1/headermain!-- 表格容器tbody用来动态插入行 --tableborder1cellpadding6theadtrthid/ththname/ththage/th/tr/theadtbody/tbody/table/mainfooter!-- 引入业务脚本 --scriptsrc./main.js/script/footer/body/html5.2 main.js 核心业务逻辑功能拆分数据请求函数loadData、页面渲染函数renderData、项目初始化init两种fetch写法async/await、原生.then链式全部注释展示。// 全局变量存储接口返回的好友数据letfriends[];/** * description 请求后端接口获取friends列表数据 * returns {PromiseArray} 接口返回的数组数据 */asyncfunctionloadData(){// endpoint接口请求终点URLconstendpointhttp://localhost:3000/friends;// await阻塞等待fetch发送请求拿到服务端原始响应对象constresawaitfetch(endpoint);// await等待二进制响应体解析为JS对象constdataawaitres.json();// 得到friends.json 的数据friendsdata;// 赋值给全局数据console.log(接口返回原始数据,data);returndata;// 补充原生Promise链式写法不使用async/await// fetch(endpoint)// .then(res res.json())// .then(data {// console.log(data);// })}/** * description 根据数据渲染表格DOM * param {Array} friendsArr 好友数组数据 */functionrenderData(friendsArr){console.log(开始执行页面渲染);// 获取表格tbodyDOM元素constoBodydocument.querySelector(table tbody);// 数据非空才进行渲染if(friendsArr.length0){// map遍历数组生成tr字符串数组join拼接成完整htmloBody.innerHTMLfriendsArr.map(function(friend){returntr td${friend.id}/td td${friend.name}/td td${friend.age}/td /tr}).join();// .join() 把数组转为字符串}}/** * description 项目初始化入口函数 */asyncfunctioninit(){console.log(项目初始化开始);// 1. 等待接口数据请求完成awaitloadData();// 2. 拿到数据后执行页面渲染renderData(friends);}// 启动项目init();5.3 项目启动步骤终端进入项目目录执行pnpm i json-server安装json-server依赖执行npx json-server data.json启动本地3000端口服务直接打开index.html文件页面自动请求接口并渲染表格数据。六、LLM接口调用方式原生Fetch直接请求LLM HTTP接口不引入SDK原生fetch携带请求头、请求体直接请求官方Endpoint灵活可控// url method http 版本号 请求行constendpointhttps://api.deepseek.com/chat/completions;// headers 请求头constheaders{Content-Type:application/json,// api key 通过 Authorization带上Authorization:Bearer sk-783c7027777f44bfa4d2f67507acec99}// 请求体constpayload{model:deepseek-v4-flash,messages:[{role:system,content:You are a helpful assistant},{role:user,content:你好 Deepseek}]}try{constresponseawaitfetch(endpoint,{method:POST,headers,// http 请求里面 传输的不可以是对象// 只能传输字符串body:JSON.stringify(payload)})constdataawaitresponse.json();console.log(data);document.getElementById(replay).innerHTMLdata.choices[0].message.content;}catch(err){}七、全文总结知识点复盘避坑指南全文总结前端HTTP请求两大原生APIXMLHttpRequest老式AJAX、fetch现代首选对接LLM主流基于前后端分离B/S架构完成前后端数据交互网络通信基础IP定位服务器、端口区分应用、DNS把域名转为IP、Endpoint是接口唯一请求地址async/await是异步请求核心语法依托Promise改造把异步请求同步化简化LLM/业务接口代码项目落地json-server快速搭建Mock后端前端fetch拉取JSON数组map拼接HTML字符串渲染页面完整复刻真实LLM接口对接流程LLM接口调用原生fetch手动组装参数调用。核心知识点复盘架构分类B/S浏览器服务端、C/S客户端服务端前后端分离是接口交互标准模式网络基础IP端口定位服务DNS解析域名→IPEndpoint接口URL异步重点fetch基于Promiseawait等待请求和JSON解析代码顺序执行数据渲染后端返回JSON数组 →Array.map生成HTML字符串 → innerHTML插入DOMLLM调用原生fetch直接请求HTTP接口。常见问题避坑指南❌ 接口请求地址端口错误前端URL端口和json-server启动端口不一致出现跨域/请求失败❌ 忘记await res.json()fetch拿到的是原始响应对象直接打印拿不到业务数据必须解析json❌ map后忘记.join()map返回数组直接赋值innerHTML会出现逗号分隔符页面错乱❌ LLM接口缺少请求头POST请求大模型接口必须携带Authorization密钥头、Content-Type否则鉴权失败❌ 同步代码顺序误区去掉await后renderData优先执行此时接口数据还未返回表格渲染为空。