做前端开发，不少人被接口折磨：分不清fetch/axios/XHR怎么选、看不懂127.0.0.1:3000地址含义、async/await异步执行顺序错乱、LLM接口对接频繁报错。

读完本文你能收获：

1. 熟练掌握三种前端原生HTTP请求写法，代码直接复制运行
2. 弄懂IP、域名、DNS、端口、Endpoint底层逻辑，接口地址不再配错
3. 学会async/await规范用法，精准控制异步执行流程
4. 掌握JSON数组格式化处理，对接OpenAI等LLM接口少踩坑

一、实战场景：对接LLM大模型HTTP接口

日常开发高频场景：前端调用OpenAI接口获取AI返回数据，分别用三种请求方式实现。后端本地Node服务启动在http://127.0.0.1:3000，接口终点/api/chat。

1. XMLHttpRequest 原生老式请求

// XHR对接LLM接口
function getLlmData() {
  const xhr = new XMLHttpRequest()
  xhr.open('POST','http://127.0.0.1:3000/api/chat')
  xhr.setRequestHeader('Content-Type','application/json')
  xhr.onreadystatechange = ()=>{
    if(xhr.readyState===4 && xhr.status===200){
      const res = JSON.parse(xhr.responseText)
      // 数组转字符串数组
      const strArr = res.data.map(item=>JSON.stringify(item))
      console.log(strArr)
    }
  }
  // JSON.stringify序列化参数
  xhr.send(JSON.stringify({prompt:'你好'}))
}
getLlmData()

⚠️踩坑提醒：XHR必须同时判断readyState=4和status=200，缺一则数据不可用。

2. Fetch 浏览器原生请求

async function fetchLlm() {
  try {
    const res = await fetch('http://127.0.0.1:3000/api/chat',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({prompt:'你好'})
    })
    // fetch不会主动抛404/500异常，必须手动判断ok
    if(!res.ok) throw new Error('接口异常')
    const data = await res.json()
    const strArr = data.map(v=>JSON.stringify(v))
    console.log(strArr)
  }catch(err){
    console.error(err)
  }
}
fetchLlm()

⚠️踩坑提醒：请求体传参必须用JSON.stringify序列化对象，后端才能正常解析。

3. Axios 项目主流请求

import axios from 'axios'
async function axiosLlm() {
  try {
    // axios自动序列化请求体，无需手动stringify
    const {data} = await axios.post('http://127.0.0.1:3000/api/chat',{
      prompt:'你好'
    })
    const strArr = data.map(item=>JSON.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:3000
• IP：网络唯一标识，用来定位服务器机器
• 域名：www.baidu.com，方便人类记忆
• DNS：域名解析服务，自动把域名翻译成对应IP地址

2. Endpoint（API接口终点）

http://127.0.0.1:3000/api/chat整串就是接口Endpoint，项目中统一管理所有接口地址，便于环境切换。

四、async/await 异步执行核心规则

执行固定顺序：先发起接口请求 → 等待接口请求完毕 → 再处理返回数据

// 标准写法
async function getDataDeal() {
  // 等待接口返回
  const raw = await fetchLlm()
  // 请求结束后再做map转换
  const result = raw.map(item=>JSON.stringify(item))
}

⚠️踩坑提醒：await只能写在async修饰的函数内部，直接全局使用代码报错。

五、JSON数组处理：map实现数组转字符串数组

// 原始JSON数组
const arr = [{name:'AI'},{name:'前端'}]
// map + JSON.stringify批量转字符串
const newArr = arr.map(item=>JSON.stringify(item))
console.log(newArr)

官方细节查阅：遇到API不懂就翻阅MDN官方文档。

六、总结

1. 前端HTTP三种方案：XHR（原生老旧）、Fetch（浏览器原生）、Axios（项目首选），对接OpenAI等LLM接口通用。
2. IP+端口定位服务，域名靠DNS解析成IP，开发本地默认127.0.0.1本机地址。
3. async+await固定搭配，管控异步请求时序，是前后端分离项目必备语法。
4. 传参、数据格式化离不开JSON.stringify，搭配map快速处理数组格式。