做前端开发不少人被接口折磨分不清fetch/axios/XHR怎么选、看不懂127.0.0.1:3000地址含义、async/await异步执行顺序错乱、LLM接口对接频繁报错。读完本文你能收获熟练掌握三种前端原生HTTP请求写法代码直接复制运行弄懂IP、域名、DNS、端口、Endpoint底层逻辑接口地址不再配错学会async/await规范用法精准控制异步执行流程掌握JSON数组格式化处理对接OpenAI等LLM接口少踩坑一、实战场景对接LLM大模型HTTP接口日常开发高频场景前端调用OpenAI接口获取AI返回数据分别用三种请求方式实现。后端本地Node服务启动在http://127.0.0.1:3000接口终点/api/chat。1. XMLHttpRequest 原生老式请求// XHR对接LLM接口functiongetLlmData(){constxhrnewXMLHttpRequest()xhr.open(POST,http://127.0.0.1:3000/api/chat)xhr.setRequestHeader(Content-Type,application/json)xhr.onreadystatechange(){if(xhr.readyState4xhr.status200){constresJSON.parse(xhr.responseText)// 数组转字符串数组conststrArrres.data.map(itemJSON.stringify(item))console.log(strArr)}}// JSON.stringify序列化参数xhr.send(JSON.stringify({prompt:你好}))}getLlmData()⚠️踩坑提醒XHR必须同时判断readyState4和status200缺一则数据不可用。2. Fetch 浏览器原生请求asyncfunctionfetchLlm(){try{constresawaitfetch(http://127.0.0.1:3000/api/chat,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({prompt:你好})})// fetch不会主动抛404/500异常必须手动判断okif(!res.ok)thrownewError(接口异常)constdataawaitres.json()conststrArrdata.map(vJSON.stringify(v))console.log(strArr)}catch(err){console.error(err)}}fetchLlm()⚠️踩坑提醒请求体传参必须用JSON.stringify序列化对象后端才能正常解析。3. Axios 项目主流请求importaxiosfromaxiosasyncfunctionaxiosLlm(){try{// axios自动序列化请求体无需手动stringifyconst{data}awaitaxios.post(http://127.0.0.1:3000/api/chat,{prompt:你好})conststrArrdata.map(itemJSON.stringify(item))console.log(strArr)}catch(e){console.error(e)}}axiosLlm()⚠️踩坑提醒axios响应数据在.data属性直接打印返回实例拿不到业务数据。二、前后端架构两种分类1. B/S架构浏览器服务端网页项目全部属于此类前端浏览器发起请求后端Java/Node服务处理逻辑。2. C/S架构客户端服务端安卓、IOS原生APP客户端调用后端API底层同样基于HTTP协议通信。以上架构全部依托前后端分离开发模式核心靠HTTP接口完成数据交互async/await是管控异步请求的标准语法。三、服务器与域名、IP底层原理1. Server组成硬件云服务器/物理主机软件Java、Node.js等后端运行环境访问格式IP:端口→127.0.0.1:3000IP网络唯一标识用来定位服务器机器域名www.baidu.com方便人类记忆DNS域名解析服务自动把域名翻译成对应IP地址2. EndpointAPI接口终点http://127.0.0.1:3000/api/chat整串就是接口Endpoint项目中统一管理所有接口地址便于环境切换。四、async/await 异步执行核心规则执行固定顺序先发起接口请求 → 等待接口请求完毕 → 再处理返回数据// 标准写法asyncfunctiongetDataDeal(){// 等待接口返回constrawawaitfetchLlm()// 请求结束后再做map转换constresultraw.map(itemJSON.stringify(item))}⚠️踩坑提醒await只能写在async修饰的函数内部直接全局使用代码报错。五、JSON数组处理map实现数组转字符串数组// 原始JSON数组constarr[{name:AI},{name:前端}]// map JSON.stringify批量转字符串constnewArrarr.map(itemJSON.stringify(item))console.log(newArr)官方细节查阅遇到API不懂就翻阅MDN官方文档。六、总结前端HTTP三种方案XHR原生老旧、Fetch浏览器原生、Axios项目首选对接OpenAI等LLM接口通用。IP端口定位服务域名靠DNS解析成IP开发本地默认127.0.0.1本机地址。asyncawait固定搭配管控异步请求时序是前后端分离项目必备语法。传参、数据格式化离不开JSON.stringify搭配map快速处理数组格式。
接口调试频频翻车？吃透3种HTTP请求+服务端基础，5个知识点搞定前后端数据对接
做前端开发不少人被接口折磨分不清fetch/axios/XHR怎么选、看不懂127.0.0.1:3000地址含义、async/await异步执行顺序错乱、LLM接口对接频繁报错。读完本文你能收获熟练掌握三种前端原生HTTP请求写法代码直接复制运行弄懂IP、域名、DNS、端口、Endpoint底层逻辑接口地址不再配错学会async/await规范用法精准控制异步执行流程掌握JSON数组格式化处理对接OpenAI等LLM接口少踩坑一、实战场景对接LLM大模型HTTP接口日常开发高频场景前端调用OpenAI接口获取AI返回数据分别用三种请求方式实现。后端本地Node服务启动在http://127.0.0.1:3000接口终点/api/chat。1. XMLHttpRequest 原生老式请求// XHR对接LLM接口functiongetLlmData(){constxhrnewXMLHttpRequest()xhr.open(POST,http://127.0.0.1:3000/api/chat)xhr.setRequestHeader(Content-Type,application/json)xhr.onreadystatechange(){if(xhr.readyState4xhr.status200){constresJSON.parse(xhr.responseText)// 数组转字符串数组conststrArrres.data.map(itemJSON.stringify(item))console.log(strArr)}}// JSON.stringify序列化参数xhr.send(JSON.stringify({prompt:你好}))}getLlmData()⚠️踩坑提醒XHR必须同时判断readyState4和status200缺一则数据不可用。2. Fetch 浏览器原生请求asyncfunctionfetchLlm(){try{constresawaitfetch(http://127.0.0.1:3000/api/chat,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({prompt:你好})})// fetch不会主动抛404/500异常必须手动判断okif(!res.ok)thrownewError(接口异常)constdataawaitres.json()conststrArrdata.map(vJSON.stringify(v))console.log(strArr)}catch(err){console.error(err)}}fetchLlm()⚠️踩坑提醒请求体传参必须用JSON.stringify序列化对象后端才能正常解析。3. Axios 项目主流请求importaxiosfromaxiosasyncfunctionaxiosLlm(){try{// axios自动序列化请求体无需手动stringifyconst{data}awaitaxios.post(http://127.0.0.1:3000/api/chat,{prompt:你好})conststrArrdata.map(itemJSON.stringify(item))console.log(strArr)}catch(e){console.error(e)}}axiosLlm()⚠️踩坑提醒axios响应数据在.data属性直接打印返回实例拿不到业务数据。二、前后端架构两种分类1. B/S架构浏览器服务端网页项目全部属于此类前端浏览器发起请求后端Java/Node服务处理逻辑。2. C/S架构客户端服务端安卓、IOS原生APP客户端调用后端API底层同样基于HTTP协议通信。以上架构全部依托前后端分离开发模式核心靠HTTP接口完成数据交互async/await是管控异步请求的标准语法。三、服务器与域名、IP底层原理1. Server组成硬件云服务器/物理主机软件Java、Node.js等后端运行环境访问格式IP:端口→127.0.0.1:3000IP网络唯一标识用来定位服务器机器域名www.baidu.com方便人类记忆DNS域名解析服务自动把域名翻译成对应IP地址2. EndpointAPI接口终点http://127.0.0.1:3000/api/chat整串就是接口Endpoint项目中统一管理所有接口地址便于环境切换。四、async/await 异步执行核心规则执行固定顺序先发起接口请求 → 等待接口请求完毕 → 再处理返回数据// 标准写法asyncfunctiongetDataDeal(){// 等待接口返回constrawawaitfetchLlm()// 请求结束后再做map转换constresultraw.map(itemJSON.stringify(item))}⚠️踩坑提醒await只能写在async修饰的函数内部直接全局使用代码报错。五、JSON数组处理map实现数组转字符串数组// 原始JSON数组constarr[{name:AI},{name:前端}]// map JSON.stringify批量转字符串constnewArrarr.map(itemJSON.stringify(item))console.log(newArr)官方细节查阅遇到API不懂就翻阅MDN官方文档。六、总结前端HTTP三种方案XHR原生老旧、Fetch浏览器原生、Axios项目首选对接OpenAI等LLM接口通用。IP端口定位服务域名靠DNS解析成IP开发本地默认127.0.0.1本机地址。asyncawait固定搭配管控异步请求时序是前后端分离项目必备语法。传参、数据格式化离不开JSON.stringify搭配map快速处理数组格式。
